/* =========================================================
   Laumonier — compléments « section claire » et correctifs.
   Le thème parent impose du blanc aux titres et du jaune aux
   liens : sur fond crème, il faut les ramener au noir.
   Chargé après style.css.
   ========================================================= */

/* Le clair de la charte Laumonier (« gris de fond » #F3F4F5) et
   un second noir enfin distinguable du premier : l'écart était
   de 1,06:1, invisible à l'œil. */
:root{
  --creme:#F3F4F5;
  --noir2:#17181A;
  --noir3:#202225;
}

.clair{color:#111111}
.clair h1,.clair h2,.clair h3,.clair h4,.clair h5,.clair h6,
.clair .display,.clair .mkn,.clair .fam .t{color:#111111}
.cta-band h1,.cta-band h2,.cta-band h3,.cta-band h4,
.cta-band .display,.cta-band .mkn{color:#0A0A0B}
.cta-band a{color:inherit}

.clair .lede a{color:#8A6A00;border-bottom-color:rgba(138,106,0,.35)}
.clair .lede a:hover{border-bottom-color:#8A6A00}

/* =========================================================
   Les deux boutons « Demander un devis ».
   Dans le bandeau jaune, le bouton noir héritait de la couleur
   du bandeau : texte noir sur fond noir. Dans l'en-tête, il
   héritait du style des entrées de menu : blanc cassé sur jaune,
   sans marge intérieure.
   ========================================================= */
.cta-band .btn-n{color:#fff}
.cta-band .btn-n:hover{color:#fff;background:#26262A}
.cta-band .btn-j{color:#0A0A0B}
.cta-band .btn-o{border-color:rgba(0,0,0,.35);color:#0A0A0B}

nav.principal a.btn{padding:12px 20px;border-bottom:0}
nav.principal a.btn-j{color:#0A0A0B;letter-spacing:.06em}
nav.principal a.btn-j:hover{color:#0A0A0B;background:#fff;border-bottom-color:transparent}

/* Page ouvrant sur un chapeau clair : en-tête opaque dès le
   chargement, sans quoi le logo et le menu blancs disparaissent. */
body.entete-claire .entete{
  background:#0A0A0B;
  border-bottom-color:rgba(255,255,255,.1);
}

/* Vitrine à deux vignettes : on resserre la grille au lieu de
   laisser une colonne vide. */
.fams.deux{grid-template-columns:repeat(2,1fr);max-width:900px}
@media(max-width:560px){.fams.deux{grid-template-columns:1fr}}

/* Cadre de présentation pour un visuel détouré posé seul. */
.vitrine{background:radial-gradient(ellipse at 50% 58%,#FFFFFF 0%,#ECEAE7 70%,#E2DFDB 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.vitrine img{width:100%;height:100%;object-fit:contain;padding:clamp(10px,2vw,26px)}
.clair .split .im.vitrine img{aspect-ratio:4/3}

/* Une photo studio sur fond noir posée dans une section claire :
   elle devient une plaque produit, assumée, bord à bord. */
.plaque{background:#0A0A0B;overflow:hidden}
.plaque img{width:100%;height:auto;display:block}

/* Les autres composants, déclinés en clair. */
.clair .nums{background:rgba(0,0,0,.14)}
.clair .nums>div{background:var(--creme)}
.clair .nums .l{color:#5F6268}
.clair .brands{border-top-color:rgba(0,0,0,.14)}
.clair .brands span{color:#5F6268}
.clair .brands span:hover{color:#8A6A00}
.clair .dl a{border-bottom-color:rgba(0,0,0,.12)}
.clair .dl a:hover{color:#8A6A00}
.clair .dl .x{color:#5F6268}
.clair .dl a:hover .x{color:#8A6A00}
.clair .gal figure{background:#fff}
.clair .gal figcaption{color:var(--texte-clair)}
.clair .gal .e{color:#8A6A00}
.clair .mini{color:#5F6268;max-width:78ch}
.clair .tile p,.clair .conf p{color:#C8CACE}

/* =========================================================
   Contrastes relevés par l'audit et remis au-dessus du seuil.
   ========================================================= */
.pied{color:#9A9DA3}
.fbot{color:#9A9DA3}
.fbot a{color:#B4B6BA}
.mini{color:#8A8D93}
.dl .x{color:#9A9DA3}
.chapeau .ariane p{color:#5F6268}
.chapeau .ariane a{color:#5F6268}

/* =========================================================
   Pas de défilement horizontal, à aucune largeur.
   Une colonne de grille vaut « 1fr » mais refuse par défaut de
   descendre sous la largeur de son plus long mot : elle pousse
   alors la page. On l'autorise à rétrécir.
   ========================================================= */
html{overflow-x:hidden;overflow-x:clip}
.nums>div,.fams>*,.mk>*,.confs>*,.spec>*,.gal>*,.two>*,.split>*,.dl>*{min-width:0}
.fam .t,.fam .s,.mkn,.conf .ref,.dl .n,.brands span{overflow-wrap:anywhere}
.lede,.prose,.prose p,.prose li,.pts .t,.ul li{overflow-wrap:break-word}

/* Les libellés des chiffres sont courts mais très espacés :
   sur téléphone on les resserre, plutôt que de les couper
   en plein mot. */
@media(max-width:560px){
  .nums>div{padding:28px 16px}
  .nums .l{font-size:10px;letter-spacing:.08em;margin-top:11px}
}

/* Sur les écrans les plus étroits, un mot long en capitales
   condensées (« CONFIDENTIALITÉ ») dépasse la colonne : on
   descend d'un cran plutôt que de le couper. */
@media(max-width:360px){
  h1.display{font-size:clamp(32px,10.5vw,42px)}
  h2.display{font-size:clamp(26px,8.5vw,34px)}
}

/* Lien d'évitement : masqué proprement, sans sortir du cadre. */
.aller-contenu{
  position:absolute;left:0;top:0;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;
}
.aller-contenu:focus{
  width:auto;height:auto;clip-path:none;padding:14px 22px;
}

/* Sur téléphone, les tuiles portrait deviennent trop basses pour
   leur légende : on leur redonne de la hauteur. */
@media(max-width:900px){
  .tile{aspect-ratio:4/3}
  .tile .cap{padding:26px 22px}
  .tile p{font-size:14px}
}
@media(max-width:560px){
  .tile{aspect-ratio:1/1}
}

/* Sur téléphone, le héros occupe tout l'écran et rien n'indique
   qu'il y a une suite : on remet l'invitation à défiler,
   centrée sous les boutons. */
@media(max-width:900px){
  .scrollhint{
    display:block;left:0;right:0;bottom:14px;
    writing-mode:horizontal-tb;text-align:center;
    font-size:9.5px;letter-spacing:.3em;
  }
  .scrollhint:after{width:1px;height:24px;margin:8px auto 0}
  .hero .inner{padding-bottom:12vh}
}