/* Social Camp'z — feuille de style unique du site
   Charte : rouille, corail, rose sable, blanc coquillage, brun cacao.
   Règles de charte respectées ici : le corail ne porte jamais de texte courant,
   le corail n'est jamais posé sur le rose sable, aucune dominante froide. */

/* ---------------------------------------------------------------- polices */
@font-face{font-family:"Blode Starkly";src:url("/assets/fonts/blode-starkly.woff2") format("woff2");
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bimbo";src:url("/assets/fonts/bimbo-400.woff2") format("woff2");
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-400.woff2") format("woff2");
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-600.woff2") format("woff2");
 font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-700.woff2") format("woff2");
 font-weight:700;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- socle */
:root{
 --rouille:#953013; --corail:#F6744F; --rose:#FDE9E4; --blanc:#FFFCFB;
 --cacao:#3D1A0E; --r30:#DFC1B8; --encre:#5A3527;
 /* Le corail est une couleur d'aplat, pas une couleur de texte : posé sur blanc il ne
    dépasse pas 2,73 pour 1, très en dessous du seuil de 4,5. Les sur-titres, écrits dans
    une police fine, prennent donc une version foncée de la même teinte : 5,45 sur blanc,
    4,76 sur rose sable. Le corail reste pour les fonds, les puces et les filets. */
 --surtitre:#C2330A; --encre2:#75564A;
 --titre:"Blode Starkly",Georgia,"Times New Roman",serif;
 --main:"Bimbo","Segoe Script","Bradley Hand",cursive;
 --corps:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 /* Le conteneur respire sur grand écran sans jamais étirer le texte : c'est la mesure
    de lecture, plus bas, qui protège les paragraphes. */
 /* Le conteneur suit la largeur réelle de l'écran, jamais son nombre de pouces : un
    MacBook Air 13,6" travaille en 1470 points de large par défaut, davantage en mode
    « Plus d'espace ». La mesure de lecture, plus bas, protège les paragraphes. */
 --large:min(1440px, 92vw); --texte:70ch; --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
 *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--blanc);color:var(--cacao);
 font-family:var(--corps);font-size:17px;line-height:1.65;font-weight:400;
 -webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--rouille);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--cacao)}
:focus-visible{outline:3px solid var(--rouille);outline-offset:3px;border-radius:4px}
hr{border:0;border-top:1px solid var(--r30);margin:40px 0}

.wrap{width:100%;max-width:var(--large);margin-inline:auto;
 padding-inline:clamp(22px,3.4vw,60px)}
/* Une colonne de lecture étroite doit rester alignée sur la marge de gauche, comme tout
   le reste du site. Réduire la largeur du conteneur la centrait entre deux blancs : le
   bloc paraissait décalé vers la droite, sans raison apparente pour le lecteur. On borne
   donc le contenu, pas le conteneur. */
.wrap.etroit{max-width:var(--large)}
.wrap.etroit > *{max-width:74ch;margin-inline:0}

/* En-tête de page sur grand écran : le titre à gauche, le chapô à droite. La mesure de
   lecture ne bouge pas — c'est la colonne isolée au milieu du blanc qui disparaît. */
.tetepage{display:grid;gap:clamp(16px,2.6vw,52px);align-items:end}
@media(min-width:1060px){
 .tetepage{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
 .tetepage .chapo{margin-bottom:.45em}
}
.saut{position:absolute;left:-9999px}
.saut:focus{left:12px;top:12px;z-index:99;position:fixed;background:var(--rouille);
 color:var(--blanc);padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:700}

/* ---------------------------------------------------------------- titres */
h1,h2{font-family:var(--titre);font-weight:400;color:var(--rouille);
 line-height:1.12;letter-spacing:.005em;margin:0 0 .4em;text-wrap:balance}
h1{font-size:clamp(30px,5.2vw,52px)}
h2{font-size:clamp(25px,3.6vw,38px)}
h3{font-family:var(--corps);font-weight:700;font-size:clamp(18px,2.1vw,21px);
 color:var(--cacao);line-height:1.3;margin:1.9em 0 .5em;letter-spacing:-.01em}
h4{font-family:var(--corps);font-weight:700;font-size:17px;margin:1.5em 0 .4em;color:var(--cacao)}
p{margin:0 0 1.05em;max-width:var(--texte)}
.sur{font-family:var(--main);font-size:clamp(20px,2.4vw,26px);color:var(--surtitre);
 line-height:1;margin:0 0 .25em;display:block}
.sur.sombre{color:var(--rose)}
.chapo{font-size:clamp(18px,2vw,20px);line-height:1.55;color:var(--encre);max-width:66ch}
.mini{font-size:14.5px;color:var(--encre)}

/* ---------------------------------------------------------------- boutons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--corps);font-weight:700;
 font-size:16px;line-height:1;padding:15px 24px;border-radius:999px;text-decoration:none;
 border:2px solid transparent;transition:background .15s,color .15s,border-color .15s;cursor:pointer}
.btn-1{background:var(--rouille);color:var(--blanc);border-color:var(--rouille)}
.btn-1:hover{background:var(--cacao);border-color:var(--cacao);color:var(--blanc)}
.btn-2{background:transparent;color:var(--rouille);border-color:var(--rouille)}
.btn-2:hover{background:var(--rouille);color:var(--blanc)}
.btn-3{background:var(--blanc);color:var(--rouille);border-color:var(--blanc)}
.btn-3:hover{background:var(--rose);border-color:var(--rose);color:var(--rouille)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------------------------------------------------------------- en-tête */
.tete{position:sticky;top:0;z-index:40;background:rgba(255,252,251,.94);
 backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--r30)}
.tete .wrap{display:flex;align-items:center;gap:20px;min-height:84px;padding-block:12px}
.marque{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.marque img{height:38px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{font-weight:600;font-size:15.5px;text-decoration:none;color:var(--cacao);white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--rouille)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:.12em}
.langue{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;
 border-left:1px solid var(--r30);padding-left:16px;margin-left:-4px}
.langue a{color:var(--encre);text-decoration:none;padding:3px 5px;border-radius:5px}
.langue a:hover{color:var(--rouille);background:var(--rose)}
.langue .actif{color:var(--rouille);background:var(--rose)}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--r30);
 border-radius:10px;padding:9px 11px;line-height:0;cursor:pointer}
.burger svg{width:20px;height:20px;stroke:var(--rouille);stroke-width:2.2;fill:none;
 stroke-linecap:round}
@media (max-width:920px){
 .burger{display:block}
 .nav{position:fixed;inset:70px 0 auto 0;background:var(--blanc);flex-direction:column;
  align-items:stretch;gap:0;padding:8px 24px 24px;border-bottom:1px solid var(--r30);
  box-shadow:0 18px 30px -22px rgba(61,26,14,.5);display:none}
 .tete:has(#menu:checked) .nav{display:flex}
 .nav a{padding:13px 0;border-bottom:1px solid var(--rose);font-size:17px}
 .langue{border-left:0;padding-left:0;margin:16px 0 0;gap:10px}
 .langue a{padding:8px 14px;font-size:16px;border:1.5px solid var(--r30);line-height:1}
 .langue .actif{border-color:var(--rouille)}
 .btn-tete{margin-top:14px;justify-content:center}
}
#menu{position:absolute;opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- sections */
main{display:block}
section{padding-block:clamp(48px,7vw,84px)}
section.serre{padding-block:clamp(34px,5vw,56px)}
.rose{background:var(--rose)}
.rouille{background:var(--rouille);color:var(--rose)}
.rouille h2,.rouille h1{color:var(--blanc)}
.rouille p{color:var(--rose)}
.rouille a{color:var(--blanc)}
.rouille .btn-3{color:var(--rouille);background:var(--blanc);border-color:var(--blanc)}
.rouille .btn-3:hover{color:var(--rouille);background:var(--rose);border-color:var(--rose)}
.rouille .btn-fant{color:var(--rose);background:transparent;border-color:var(--rose)}
.rouille .btn-fant:hover{color:var(--rouille);background:var(--rose);border-color:var(--rose)}
.encadre a{color:var(--cacao)}

/* héros : image à droite, texte à gauche (préconisation retenue) */
.heros{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
 gap:clamp(28px,4vw,56px);align-items:center}
.heros img{border-radius:var(--r);width:100%;aspect-ratio:16/9;object-fit:cover}
.heros.carre img{aspect-ratio:1/1}
/* « Image sur un tiers, texte sur deux tiers » : le portrait met un visage sur le nom,
   mais c'est le texte qui porte l'argument — il lui faut la place. */
.heros.tiers{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center}
.heros.tiers img{aspect-ratio:1/1;object-fit:cover;max-height:430px}
/* Sur mobile, le texte passe avant l'image : la phrase d'accroche, le menu et le bouton
   doivent tenir au-dessus de la ligne de flottaison — c'est l'arbitrage retenu. */
@media (max-width:860px){.heros,.heros.tiers{grid-template-columns:1fr}
 .heros .visuel{order:1}
 .heros.tiers img{max-width:300px}
 .heros img{aspect-ratio:3/2}}

/* trois cartes égales */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
@media (max-width:860px){.cartes{grid-template-columns:1fr}}
.carte{background:var(--blanc);border:1px solid var(--r30);border-radius:var(--r);
 padding:26px 24px 24px;display:flex;flex-direction:column}
.rose .carte{background:var(--blanc)}
.carte h3{margin-top:0}
.carte p{flex:1}
.carte .lien{font-weight:700;text-decoration:none;font-size:15.5px}
.carte .lien::after{content:" →"}

/* bande à défilement, en CSS pur — tout reste dans le HTML donc indexé */
.bande{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,300px);gap:16px;
 overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 18px;
 scrollbar-color:var(--r30) transparent}
.bande>figure{scroll-snap-align:start;margin:0;align-self:start}
/* Chaque vignette garde ses proportions réelles. Imposer un 4/5 à une story en 9/16
   ou à une planche produit en 4/7 revenait à en couper le haut et le bas — ce qui, sur
   une maquette de vêtement ou un moodboard, retire précisément ce qu'on venait montrer.
   Les attributs width et height de la balise donnent le ratio, aucun recadrage n'a lieu. */
.bande img{border-radius:12px;width:100%;height:auto;object-fit:contain;background:var(--rose)}
.bande figcaption{font-size:13.5px;color:var(--encre);margin-top:8px;line-height:1.4}

/* planche de vignettes */
.planche{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:20px;align-items:start}
.planche figure{margin:0}
.planche img{border-radius:12px;width:100%;height:auto;object-fit:contain;background:var(--rose)}
.planche figcaption{font-size:13px;color:var(--encre);margin-top:7px;line-height:1.4}

/* deux photos côte à côte */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:28px}
.duo img{border-radius:var(--r);aspect-ratio:3/2;object-fit:cover;width:100%}
@media (max-width:640px){.duo{grid-template-columns:1fr}}
.communes{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.communes li{background:var(--blanc);border:1px solid var(--r30);border-radius:999px;
 padding:6px 14px;font-size:14.5px;font-weight:600}
.rose .communes li{background:var(--blanc)}

/* ---------------------------------------------------------------- offres */
.pack{border:1px solid var(--r30);border-radius:var(--r);padding:clamp(24px,3.4vw,38px);
 margin-bottom:24px;background:var(--blanc)}
.pack.vedette{border-color:var(--rouille);border-width:2px}
.pack .haut{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-bottom:6px}
.pack h3{font-family:var(--titre);font-weight:400;color:var(--rouille);
 font-size:clamp(23px,3vw,30px);margin:0;line-height:1.1}
.etiq{font-size:14px;font-weight:700;color:var(--encre)}
.pack .corps{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
 gap:clamp(22px,3vw,40px);align-items:start;margin-top:18px}
@media (max-width:820px){.pack .corps{grid-template-columns:1fr}}
/* Pas d'illustration d'offre au lancement : la colonne de droite porte la promesse. */
.promesse{background:var(--rose);border-radius:12px;padding:22px 30px 20px 24px}
.pack.vedette .promesse{background:var(--rouille)}
.pack.vedette .promesse .sur,.pack.vedette .promesse .resultat{color:var(--blanc)}
.pack.vedette .promesse .exclu{color:var(--rose);border-left-color:rgba(255,252,251,.4)}
/* L'intitulé reste en Manrope : deux lignes de Bimbo l'une sur l'autre se confondent. */
.promesse .sur{font-family:var(--corps);font-weight:700;font-size:11.5px;letter-spacing:.11em;
 text-transform:uppercase;color:var(--encre2);margin-bottom:.7em;line-height:1.2}
.pack.vedette .promesse .sur{color:var(--r30)}
.resultat{font-family:var(--main);font-size:clamp(21px,2.5vw,27px);color:var(--rouille);
 line-height:1.08;margin:0 0 16px;display:block;overflow-wrap:break-word}
.promesse .exclu{margin:0;border-left:3px solid var(--r30);padding-left:14px;font-size:14.5px}
ul.inclus{list-style:none;padding:0;margin:0 0 16px}
ul.inclus li{position:relative;padding-left:26px;margin-bottom:7px}
ul.inclus li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
 border-radius:50%;background:var(--corail)}
.exclu{font-size:15px;color:var(--encre);border-left:3px solid var(--r30);padding-left:14px;
 margin:0}
details.bloc{border:1px solid var(--r30);border-radius:var(--r);margin-bottom:12px;
 background:var(--blanc);overflow:hidden}
details.bloc>summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:17px;
 list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
details.bloc>summary::-webkit-details-marker{display:none}
details.bloc>summary::after{content:"+";font-family:var(--corps);font-weight:400;font-size:26px;
 color:var(--rouille);line-height:1;flex:0 0 auto}
details.bloc[open]>summary::after{content:"–"}
details.bloc>summary:hover{background:var(--rose)}
details.bloc .dedans{padding:0 22px 24px}
details.bloc .dedans>*:first-child{margin-top:0}
.sum-etiq{font-weight:400;font-size:14.5px;color:var(--encre);flex:1}

/* encadré corail — fond corail, texte blanc, jamais sur rose sable */
/* Fond corail, texte brun cacao : le blanc sur corail plafonne à 2,79 pour 1. */
.encadre{background:var(--corail);color:var(--cacao);border-radius:var(--r);
 padding:clamp(26px,3.4vw,40px);margin:34px 0}
.encadre h2,.encadre h3{color:var(--cacao);margin-top:0}
.encadre p{color:var(--cacao);max-width:64ch}
.encadre .sur{color:var(--cacao)}
.encadre .btn-3{background:var(--cacao);border-color:var(--cacao);color:var(--blanc)}
.encadre .btn-3:hover{background:var(--rouille);border-color:var(--rouille);color:var(--blanc)}
.encadre .btn-3.btn-fant{background:transparent;color:var(--cacao);border-color:var(--cacao)}
.encadre .btn-3.btn-fant:hover{background:var(--cacao);color:var(--corail);border-color:var(--cacao)}
.passerelle{border:1px solid var(--r30);border-left:4px solid var(--corail);border-radius:10px;
 padding:22px 24px;margin:38px 0 0;background:var(--blanc)}
.passerelle h3,.passerelle p{margin-top:0}

/* ---------------------------------------------------------------- blog */
.grille-blog{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:30px}
.art{border:1px solid var(--r30);border-radius:var(--r);padding:26px 24px;background:var(--blanc);
 display:flex;flex-direction:column}
.art h3{margin-top:0;font-size:19px}
.art h3 a{text-decoration:none;color:var(--cacao)}
.art h3 a:hover{color:var(--rouille)}
.art p{flex:1;font-size:15.5px}
.duree{font-size:13px;font-weight:700;color:var(--encre);letter-spacing:.06em;text-transform:uppercase;
 margin-bottom:10px}
.article{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
 gap:clamp(24px,4vw,60px);align-items:start}
@media (max-width:960px){.article{grid-template-columns:1fr}}
.sommaire{position:sticky;top:96px;font-size:15px;border-left:2px solid var(--r30);padding-left:18px}
.sommaire p{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--encre);margin-bottom:10px}
.sommaire ol{list-style:none;padding:0;margin:0}
.sommaire li{margin-bottom:11px;line-height:1.35}
.sommaire a{text-decoration:none;color:var(--encre)}
.sommaire a:hover{color:var(--rouille);text-decoration:underline}
@media (max-width:960px){.sommaire{position:static;border-left:0;border-top:1px solid var(--r30);
 padding:18px 0 0}}
.texte{max-width:72ch}
.texte h2{font-size:clamp(22px,2.8vw,29px);margin-top:1.7em}
.texte ul{padding-left:0;list-style:none;margin:0 0 1.2em}
.texte ul li{position:relative;padding-left:24px;margin-bottom:8px;max-width:var(--texte)}
.texte ul li::before{content:"";position:absolute;left:3px;top:.66em;width:7px;height:7px;
 border-radius:50%;background:var(--corail)}
blockquote{margin:1.6em 0;padding:2px 0 2px 22px;border-left:3px solid var(--corail);
 font-size:18px;color:var(--encre);font-style:normal}
blockquote p:last-child{margin-bottom:0}
.exergue{font-family:var(--main);font-size:clamp(22px,3vw,30px);color:var(--rouille);
 line-height:1.15;margin:1.5em 0;padding:0;max-width:26ch}
.tableau{overflow-x:auto;margin:1.5em 0;border:1px solid var(--r30);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:460px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--r30);vertical-align:top}
th{background:var(--rose);font-weight:700;color:var(--cacao)}
tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- formulaire */
.form{display:grid;gap:16px;max-width:560px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-weight:700;font-size:15px}
.champ input,.champ textarea,.champ select{font-family:var(--corps);font-size:16px;
 padding:13px 15px;border:1.5px solid var(--r30);border-radius:10px;background:var(--blanc);
 color:var(--cacao);width:100%}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--rouille);outline:none}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.45;
 color:var(--encre);max-width:560px}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--rouille);flex:0 0 auto}
.pot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.deux{display:grid;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,340px);
 gap:clamp(26px,4vw,54px);align-items:start}
@media (max-width:900px){.deux{grid-template-columns:1fr}}
.aside{background:var(--rose);border-radius:var(--r);padding:26px 24px}
.aside h3{margin-top:0}
.aside p:last-child{margin-bottom:0}
.aside ul{list-style:none;padding:0;margin:0 0 1em}
.aside li{margin-bottom:6px}

/* ---------------------------------------------------------------- pied */
.pied{background:var(--rouille);color:var(--rose);padding-block:52px 30px;margin-top:0}
.pied a{color:var(--rose);text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied .cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
 gap:34px}
@media (max-width:800px){.pied .cols{grid-template-columns:1fr;gap:28px}}
.pied img{height:44px;width:auto;margin-bottom:14px}
.pied h2{font-family:var(--corps);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--r30);font-weight:700;margin-bottom:12px}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:8px;font-size:15.5px}
/* Les coordonnées : l'icône est décorative et masquée aux lecteurs d'écran ; elle prend
   la couleur du texte par currentColor, donc elle suit la charte sans être retouchée. */
.pied ul.coord li{display:flex;align-items:center;gap:10px}
.pied ul.coord svg{flex:0 0 auto;opacity:.9}
.pied ul.coord img{flex:0 0 auto;width:20px;height:20px}
.pied .bas{border-top:1px solid rgba(255,252,251,.22);margin-top:34px;padding-top:20px;
 font-size:13.5px;color:var(--r30);display:flex;flex-wrap:wrap;gap:8px 20px}
.pied p{color:var(--rose);font-size:15.5px}

/* familles de réalisations : un titre, un descriptif, puis les vignettes */
.famille{margin-bottom:clamp(34px,4.4vw,56px)}
.famille>h3{margin:0 0 6px}
.famille>.chapo{margin:0 0 14px;max-width:74ch}

/* catégories de prestations, sur la page Services */
h3.cat{font-family:var(--titre);font-size:clamp(24px,2.4vw,31px);color:var(--rouille);
 margin:clamp(38px,4.4vw,58px) 0 18px;padding-bottom:10px;border-bottom:2px solid var(--r30)}
h3.cat:first-of-type{margin-top:6px}

/* le libellé fonctionnel d'une carte : il porte les mots-clés, il ne doit pas
   se confondre avec le nom de la prestation qui le précède */
.carte .etiq-carte{margin:.25em 0 .8em;font-size:14px;font-weight:600;color:var(--encre);flex:0 0 auto}
/* le titre d'une famille de réalisations est un titre, pas une ligne de corps de texte */
.famille>h3{font-family:var(--titre);font-weight:400;color:var(--rouille);
 font-size:clamp(22px,2.1vw,28px);line-height:1.15}

/* ============================================================
   MISES EN PAGE D'EN-TÊTE
   Le Créawebsite propose une liste de mises en page ; ce sont les classes qui les rendent.
   ============================================================ */

/* « Image en bandeau pleine largeur, titre par-dessus ».
   Trois précautions, sans lesquelles ce format est un piège :
   — l'image devient le plus grand élément affiché, donc la mesure d'affichage principal :
     elle est servie non différée et en priorité haute ;
   — un titre clair sur une photo claire est illisible : un dégradé sombre monte du bas,
     posé sur l'image et non sur le texte, pour ne pas voiler la lecture ;
   — sur mobile la hauteur est bornée en unités de vue, sinon le bandeau chasse le menu
     et le bouton WhatsApp sous la ligne de flottaison. */
.bandeau{display:grid;padding:0;isolation:isolate;overflow:hidden}
.bandeau>img,.bandeau>.bandeau-texte{grid-area:1/1}   /* superposés : la hauteur de la
   section est celle du plus grand des deux, donc le texte ne déborde jamais sous l'image */
.bandeau>img{display:block;width:100%;height:100%;min-height:clamp(340px,56vh,520px);object-fit:cover}
.bandeau::after{content:"";grid-area:1/1;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(61,26,14,.80) 0%, rgba(61,26,14,.58) 40%,
                                     rgba(61,26,14,.14) 74%, rgba(61,26,14,0) 100%)}
.bandeau-texte{z-index:2;align-self:end;padding-block:clamp(26px,4vw,54px)}
.bandeau-texte .sur{color:var(--rose)}
.bandeau-texte h1,.bandeau-texte h2{color:#FFFCFB;margin:.06em 0 .3em}
.bandeau-texte .chapo{color:var(--rose);max-width:58ch}
.bandeau-texte .btns{margin-top:18px}
.bandeau-texte .btn-2{color:#FFFCFB;border-color:rgba(255,252,251,.7)}
@media (max-width:640px){
  .bandeau>img{min-height:clamp(320px,62vh,440px)}
  .bandeau-texte .chapo{display:none}   /* le titre et les boutons restent au-dessus de la ligne */
}

/* « Image en bandeau pleine largeur, titre dessous » : aucun voile nécessaire,
   le texte revient sur le fond de page. */
.bandeau-dessous img{display:block;width:100%;height:clamp(260px,40vh,420px);object-fit:cover}
.bandeau-dessous .wrap{padding-top:clamp(24px,3.4vw,44px)}

/* « Image à gauche, texte à droite » : même grille, colonnes permutées. */
.heros.inverse>div:first-child{order:2}
.heros.inverse .visuel{order:1}
/* « Image au-dessus, texte dessous » */
.heros.empile{grid-template-columns:1fr}
.heros.empile .visuel{order:-1}
/* « Titre seul, très grand » */
[style*="--titre-plus"] h1{font-size:calc(clamp(38px,5.2vw,66px) * var(--titre-plus,1))}

/* Deux boutons dans l'en-tête : WhatsApp reste le canal principal — plein —, Instagram
   vient en second — contour seulement. Deux boutons pleins côte à côte se disputeraient
   l'attention et aucun ne serait « le » bouton. */
.tete .btn-tete{padding-inline:clamp(14px,1.4vw,22px)}
.tete .btn-insta{background:transparent;color:var(--rouille);border-color:var(--rouille)}
.tete .btn-insta:hover{background:var(--rouille);color:var(--blanc)}
.tete .btn-insta svg{width:18px;height:18px;flex:0 0 auto}
@media (max-width:900px){ .tete .btn-insta span{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap} }