/* ==========================================================================
   França'Rénov — feuille de styles
   Rénovation tous corps d'état · Rolle, La Côte, arc lémanique

    1. Jetons              9 bis. Problèmes          15. Avis
    2. Base                9 ter. Différenciateurs   18. Appel final
    3. Ossature            9 quater. Pour qui        19. Pages intérieures
    4. Boutons             9 quinq. WhatsApp         19 ter. Mosaïque
    5. En-tête            11. Avant / après          19 quater. Preuve
    6. Héros              13. Réalisations           20. Pied
    7. Panneau devis                                 21. Divers
   ========================================================================== */

/* --- 1. Jetons ---------------------------------------------------------- */

:root {
  /* ---- Plaquette graphique : couleurs du logo França'Rénov -----------
     Brun du logo #4F2C18, caramel du toit #C38E58, beige du nom #E9D1B5,
     crème du R #F6EFE7. Contrastes mesurés : encre/papier 13,6:1 ·
     accent/papier 6,0:1 · beige/brun 8,8:1. Tous au-dessus du seuil AA.     */

  --brun:        #4F2C18;   /* fond du logo : bandes sombres, pied, boutons */
  --caramel:     #C38E58;   /* toit et fenêtre du logo : décor, jamais du texte sur clair */
  --or:          #E9D1B5;   /* nom du logo : texte et accents sur fond brun */
  --creme:       #F6EFE7;   /* le R du logo */

  --fond:        #FAF5EC;   /* papier, blanc cassé chaud */
  --fond-2:      #F1E5D2;   /* sable, bande alternée */
  --fond-3:      #FFFFFF;   /* survols */
  --panneau:     #FFFFFF;   /* panneaux */

  --encre:       #3B220C;   /* brun du logo assombri — remplace le noir */
  --encre-2:     #5E3410;   /* texte secondaire : le brun du logo */
  --encre-3:     #7A5434;   /* légendes */

  --olive:       #86521F;   /* accent texte : caramel du logo assombri */
  --olive-fonce: #5E3410;
  --olive-clair: #E9D1B5;   /* accent sur fond sombre : l'or du logo */

  --trait:       #E0CDB0;   /* filet décoratif */
  --trait-fort:  #3B220C;   /* filet porteur et bordures de champs */

  --d: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --t: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --t-xs:  0.76rem;
  --t-sm:  0.9rem;
  --t-md:  clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --t-lg:  clamp(1.08rem, 1.02rem + 0.3vw, 1.24rem);
  --t-xl:  clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
  --t-2xl: clamp(1.8rem, 1.45rem + 1.6vw, 2.9rem);
  --t-3xl: clamp(2.3rem, 1.7rem + 2.8vw, 3.9rem);

  --marge: clamp(1.1rem, 3vw, 2.4rem);
  --max: 84rem;
  --r: 0px;        /* angles vifs : c'est la regle de la DA */
  --r-sm: 0px;
  --r-xs: 0px;
  --pill: 999px;   /* seules les pastilles restent rondes */

  --ombre:   none;                                   /* pas d'ombre : le filet suffit */
  --ombre-f: 0 30px 80px -34px rgba(17, 17, 17, .5); /* sauf le panneau du heros */
}

/* --- 2. Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--t);
  font-size: var(--t-md);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--d);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.12; }
h4 { font-size: var(--t-lg); }
em { font-style: italic; font-family: var(--d); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: .22em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
strong, b { font-weight: 600; }

::selection { background: var(--olive); color: var(--panneau); }
:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- 3. Ossature -------------------------------------------------------- */

.shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--marge); }

.section {
  padding-block: clamp(3.4rem, 7vw, 6.4rem); position: relative;
}
.section--sombre .chapo { color: rgba(250, 245, 236, .72); }

.surtitre {
  display: inline-block;
  font-family: var(--t);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--olive); margin-bottom: .9rem;
}
.section--sombre .surtitre { color: var(--olive-clair); }
/* Variante discrete : un titre de rang, aligne a gauche, qui ne vole pas la vedette
   aux images. C'est la regle ; le titre centre est l'exception.                    */
.tete-rang {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem;
  max-width: none; margin: 0 0 clamp(1.4rem, 2.6vw, 2rem); text-align: left;
  border-bottom: 1px solid var(--trait); padding-bottom: 1rem;
}
.tete-rang h2 {
  font-family: var(--t); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.95rem); line-height: 1;
  letter-spacing: -.02em; margin: 0;
}
.tete-rang p { margin: 0; font-size: var(--t-sm); color: var(--encre-3); }
.tete-rang .surtitre { margin: 0; order: -1; flex-basis: 100%; }
.tete-rang a { margin-left: auto; }
.tete-sec .chapo { margin-inline: auto; max-width: 42rem; }
.chapo { font-size: var(--t-lg); line-height: 1.55; color: var(--encre-2); }

.saut-lien {
  position: absolute; left: .75rem; top: -110%; z-index: 300;
  background: var(--encre); color: var(--panneau);
  padding: .75rem 1.2rem; border-radius: var(--r-sm);
  font-family: var(--d); font-weight: 700; font-size: var(--t-sm);
  text-decoration: none;
}
.saut-lien:focus { top: .75rem; }

/* --- 4. Boutons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem;
  font-family: var(--t); font-size: .94rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  background: var(--olive); color: var(--panneau);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--olive-fonce); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--sombre { background: var(--brun); }
.btn--sombre:hover { background: #3B220C; }

.btn--creux { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--creux:hover { background: var(--encre); color: var(--panneau); border-color: var(--encre); }
.section--sombre .btn--creux, .heros .btn--creux {
  color: var(--panneau); border-color: rgba(250, 245, 236, .45);
}
.section--sombre .btn--creux:hover, .heros .btn--creux:hover {
  background: var(--panneau); color: var(--encre); border-color: var(--panneau);
}

.btn--bloc { width: 100%; }
.btn:disabled { background: var(--fond-2); color: var(--encre-3); cursor: not-allowed; }

.btns { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* --- 5. En-tête flottant ------------------------------------------------ */

.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: .75rem;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.entete.cache { transform: translateY(-130%); }
@media (prefers-reduced-motion: reduce) { .entete { transition: none; } }
.entete-int {
  max-width: 92rem; margin-inline: auto;
  background: var(--panneau); border-radius: var(--r);
  display: flex; align-items: center; gap: 1.2rem;
  padding: .65rem .7rem .65rem 1.3rem;
  box-shadow: var(--ombre);
  transition: padding .25s ease;
}
.entete.compact .entete-int { padding-block: .45rem; }

.marque {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--d); font-weight: 700; font-size: 1.28rem;
  letter-spacing: -.05em; text-decoration: none; color: var(--encre);
}
.marque svg { width: 30px; height: 30px; border-radius: 7px; flex: none; }
.marque em { font-style: normal; color: var(--olive); }

.menu { margin-left: auto; display: none; align-items: center; gap: 1.6rem; }
.menu a {
  font-size: .96rem; color: var(--encre-2); text-decoration: none;
  padding: .35rem 0; border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--encre); border-color: var(--olive); }
.menu > .tel, .menu > .btn { display: none; }

.tel {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--d); font-weight: 700; font-size: 1rem; letter-spacing: -.02em;
  text-decoration: none; color: var(--encre); white-space: nowrap;
}
.tel svg { width: 16px; height: 16px; flex: none; }
.entete > .entete-int > .tel { display: none; }

.burger {
  margin-left: auto; display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  background: var(--fond); border: 1px solid var(--trait-fort); border-radius: var(--r-sm);
  color: var(--encre); cursor: pointer;
}
.burger svg { width: 20px; height: 20px; }

/* --- 6. Héros ----------------------------------------------------------- */

.heros {
  position: relative; padding: .75rem;
  min-height: clamp(38rem, 92svh, 54rem);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 5.5rem;
}
.heros-fond { position: absolute; inset: .75rem; border-radius: var(--r); overflow: hidden; background: var(--fond-2); }
.heros-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 70%; }
.heros-fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(250, 245, 236,.08) 0%, rgba(59, 34, 12,.24) 52%, rgba(59, 34, 12,.42) 100%);
}

.heros-grille {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr; gap: 1.3rem;
  align-items: center; padding: 2rem .6rem .6rem;
}
.heros-texte .surtitre { color: rgba(250, 245, 236, .78); }
.heros-texte h1 { color: var(--panneau); max-width: 13em; text-shadow: 0 2px 24px rgba(59, 34, 12,.4); }
.heros-texte .chapo {
  color: rgba(250, 245, 236, .9); max-width: 32rem;
  text-shadow: 0 1px 14px rgba(59, 34, 12,.5);
}
.heros-note { margin-top: 1rem; font-size: var(--t-sm); color: rgba(250, 245, 236, .74); }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; }
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .03em;
  color: var(--panneau); background: rgba(59, 34, 12, .42);
  border: 1px solid rgba(250, 245, 236, .3);
  padding: .4rem .8rem; border-radius: var(--pill);
  backdrop-filter: blur(6px);
}
.badge svg { width: 14px; height: 14px; flex: none; }

.defile {
  position: absolute; right: 1.6rem; bottom: 1.4rem; z-index: 3;
  display: none; color: rgba(250, 245, 236, .7);
}
.defile svg { width: 22px; height: 22px; }

/* --- 7. Panneau de devis ------------------------------------------------ */

.quali {
  background: var(--panneau); border-radius: var(--r);
  box-shadow: var(--ombre-f); align-self: end; width: 100%;
}
.quali-corps { padding: clamp(1.2rem, 2.5vw, 1.6rem); }
.quali h2 { font-size: 1.32rem; letter-spacing: -.035em; margin-bottom: .3rem; }
.quali-sous { font-size: var(--t-sm); color: var(--encre-2); margin-bottom: 1rem; }

.choix-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.choix {
  font: inherit; font-size: .93rem; text-align: left; cursor: pointer; color: var(--encre);
  background: var(--fond); border: 1.5px solid var(--trait-fort); border-radius: var(--r-sm);
  padding: .72rem .85rem;
  transition: border-color .16s ease, background-color .16s ease;
}
.choix:hover { border-color: var(--olive-clair); background: var(--fond-3); }
.choix[aria-pressed="true"] {
  border-color: var(--olive); background: #F3E2CB;
  box-shadow: inset 0 0 0 1px var(--olive); font-weight: 600;
}
.choix--large { grid-column: 1 / -1; }

.champ { margin-top: .9rem; }
.champ label, .num {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3);
  margin-bottom: .35rem;
}
.champ input, .champ textarea, .champ select {
  display: block; width: 100%; font: inherit; font-size: 1rem;
  padding: .85rem 1rem; color: var(--encre);
  background: var(--fond); border: 1.5px solid var(--trait-fort); border-radius: var(--r-sm);
  transition: border-color .16s ease, background-color .16s ease;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 0; border-color: var(--olive); background: #fff;
  box-shadow: 0 0 0 3px rgba(134, 82, 31, .2);
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: #A8331F; }
.champ-duo { display: grid; grid-template-columns: 1fr; gap: .9rem; }

.case { display: flex; align-items: flex-start; gap: .6rem; }
.case input { width: 20px; height: 20px; flex: none; margin-top: .2rem; accent-color: var(--olive); }
.case label {
  font-size: var(--t-sm); font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--encre-2); margin: 0;
}
.case label a { color: var(--olive); font-weight: 600; }

.erreur { display: none; margin: .35rem 0 0; font-size: var(--t-sm); color: #8F2A19; }
.erreur.on { display: block; }

.quali-pied { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; }
.quali-pied .btn { flex: 1; }

.etat { display: none; margin: .8rem 0 0; font-size: var(--t-sm); }
.etat.on { display: block; }
.rassure { margin-top: .7rem; font-size: var(--t-xs); color: var(--encre-3); text-align: center; }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }




/* --- 9 octies. Les deux portes : image plein cadre, texte dessus -------- */

.portes { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 50rem) { .portes { grid-template-columns: 1fr 1fr; } }

.porte {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: #FFF;
  min-height: clamp(21rem, 46vw, 32rem);
  padding: clamp(1.6rem, 4vw, 3.2rem);
}
.porte img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.porte::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(59, 34, 12,.93) 4%, rgba(59, 34, 12,.5) 48%, rgba(59, 34, 12,.2) 100%);
  transition: background .4s ease;
}
.porte:hover img { transform: scale(1.045); }
.porte:hover::after {
  background: linear-gradient(to top, rgba(94, 52, 16,.94) 4%, rgba(59, 34, 12,.58) 52%, rgba(59, 34, 12,.24) 100%);
}
.porte:focus-visible { outline: 3px solid var(--olive-clair); outline-offset: -3px; }

.porte-eti {
  font-family: var(--t); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--olive-clair);
}
.porte h3 {
  font-family: var(--t); font-weight: 800; text-transform: uppercase; color: #FFF;
  font-size: clamp(1.5rem, .95rem + 2.3vw, 2.7rem); line-height: .95;
  letter-spacing: -.028em; margin: .8rem 0 .6rem; max-width: 13ch;
}
.porte > p { font-size: var(--t-md); color: rgba(255,255,255,.82); margin: 0 0 1.5rem; max-width: 34ch; }
.porte-fin {
  font-family: var(--t); font-weight: 700; font-size: .93rem;
  text-transform: uppercase; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: .6rem;
  border-top: 1px solid rgba(255,255,255,.4); padding-top: 1rem; width: fit-content;
}
.porte-fin svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2;
                 transition: transform .25s cubic-bezier(.22,1,.36,1); }
.porte:hover .porte-fin svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .porte img, .porte::after, .porte-fin svg { transition: none; }
  .porte:hover img { transform: none; }
}

/* --- 9 quinquies. WhatsApp : pastille + libelle en toutes lettres ------- */
.wa {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 185;
  display: inline-flex; align-items: center; gap: 0;
  text-decoration: none; color: var(--encre);
}
.wa-txt {
  display: none; background: var(--encre); color: #FFF;
  border: 1.5px solid var(--encre); border-right: 0;
  font-family: var(--t); font-weight: 600; font-size: var(--t-sm);
  padding: .62rem 1rem; white-space: nowrap;
}
.wa-rond {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: #25A65A; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(17, 17, 17, .26);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.wa svg { width: 27px; height: 27px; fill: #FFF; }
.wa:hover .wa-rond, .wa:focus-visible .wa-rond { transform: scale(1.07); }
@media (min-width: 48rem) {
  .wa { right: 1.6rem; bottom: 1.6rem; }
  .wa-txt { display: block; }
}
@media (max-width: 47.99rem) { .wa { bottom: 5.4rem; } }
@media (prefers-reduced-motion: reduce) { .wa-rond { transition: none; } }

/* --- 18. Appel final ----------------------------------------------------- */

.cta-final { text-align: center; max-width: 44rem; margin-inline: auto; }
.cta-final .communes { margin-bottom: 1.8rem; }
.cta-final .btns { justify-content: center; margin-top: 1.6rem; }
@keyframes glisse { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.contact-cote .surtitre { margin-bottom: .6rem; }
.champ textarea { resize: vertical; min-height: 7rem; font-family: inherit; }
.tete-page .chapo { max-width: 42rem; }

.fil { font-size: var(--t-sm); color: var(--encre-3); margin-bottom: 1.2rem; }
.fil a { color: var(--encre-2); }

.texte { max-width: 46rem; }
.texte h2 { margin-top: 2.4rem; font-size: var(--t-xl); }
.texte h3 { margin-top: 1.6rem; font-size: var(--t-lg); }
.texte a { color: var(--olive); font-weight: 600; }
.texte ul { color: var(--encre-2); }

.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tableau th, .tableau td { text-align: left; padding: .75rem .8rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th { font-family: var(--d); font-weight: 700; background: var(--fond-2); }

.perdu { text-align: center; padding: 9rem 0 6rem; }
.perdu-num {
  font-family: var(--d); font-weight: 700; font-size: clamp(5rem, 18vw, 11rem);
  line-height: .9; letter-spacing: -.06em; color: var(--olive); display: block; margin-bottom: 1rem;
}


/* --- 20. Pied ------------------------------------------------------------ */

.pied { background: var(--brun); color: rgba(250, 245, 236, .78); padding-top: clamp(2.5rem, 5vw, 4rem); }
.pied-grille { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.pied h2 { font-size: var(--t-sm); font-family: var(--t); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--olive-clair); margin-bottom: .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .5rem; font-size: var(--t-sm); }
.pied a { display: inline-block; text-decoration: none; padding-block: .7rem; }
.pied a:hover { color: var(--panneau); text-decoration: underline; }
.pied-marque .marque { color: var(--panneau); margin-bottom: .8rem; }
.pied-marque .marque em { color: var(--olive-clair); }
.pied-marque p { font-size: var(--t-sm); max-width: 24rem; }
.pied-bas {
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center;
  border-top: 1px solid rgba(250, 245, 236, .16); padding-block: 1.3rem; font-size: var(--t-xs);
}
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Pied : deux colonnes des 23rem, pour ne pas empiler sur 1200px de haut */
@media (max-width: 47.99rem) {
  .pied-grille { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.2rem; }
  .pied-marque { grid-column: 1 / -1; }
}

/* Ligne des communes, en remplacement du pave en colonnes */
.communes {
  max-width: 48ch; margin: 0 auto 1.4rem; font-size: var(--t-sm);
  color: rgba(250, 245, 236, .72); line-height: 1.9;
}

/* --- 21. Divers ---------------------------------------------------------- */

.barre-mob {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
  display: flex; gap: .5rem; padding: .6rem;
  background: rgba(250, 245, 236, .94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--trait);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.barre-mob.on { transform: none; }
@media (prefers-reduced-motion: reduce) { .barre-mob { transition: none; } }
.barre-mob .btn { flex: 1; padding-block: .85rem; }

/* Apparition au défilement */
.montre { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.montre.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .montre { opacity: 1; transform: none; } }

/* --- 21 bis. Champ piege anti-robots (hors ecran, jamais display:none) --- */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- 21 ter. Cibles tactiles mobiles (minimum 44 px) -------------------- */
#c-rgpd, #a-rgpd { width: 24px; height: 24px; flex: 0 0 24px; }
#c-rgpd + label, #a-rgpd + label { padding-block: .6rem; }

/* --- 22. Adaptation ------------------------------------------------------ */

@media (min-width: 40rem) {
  .champ-duo { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 62rem) {
  .menu { display: flex; }
  .burger { display: none; }
  .entete > .entete-int > .tel { display: inline-flex; }
  .defile { display: block; }
  .barre-mob { display: none; }

  .heros { padding-top: 6rem; }
  .heros-grille { grid-template-columns: 1.22fr .78fr; gap: 2.5rem; padding: 3rem 1.3rem 1.3rem; }
  .quali { max-width: 30rem; justify-self: end; }
  .pied-grille { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 2.5rem; }
  .pied-bas nav { margin-left: auto; }
}

@media (max-width: 61.99rem) {
  .menu {
    display: none; position: absolute; top: calc(100% + .5rem); left: .75rem; right: .75rem;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--panneau); border-radius: var(--r); padding: 1rem;
    box-shadow: var(--ombre-f);
  }
  .menu.on { display: flex; }
  .menu a { padding: .8rem .4rem; border-bottom: 1px solid var(--trait); }
  .menu a:last-child { border-bottom: 0; }
  .menu > .tel, .menu > .btn { display: flex; margin-top: .6rem; }
  .entete-int { position: relative; }
  body { padding-bottom: 4.5rem; }
}

/* --- 23. Impression ------------------------------------------------------ */

@media print {
  .entete, .barre-mob, .defile, .conf, .rail-cmd { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* --- 22 d. Les deux portes : plus basses, titres plus sobres ------------ */

.porte {
  min-height: clamp(14.5rem, 27vw, 20rem);
  padding: clamp(1.3rem, 2.8vw, 2.4rem);
}
.porte h3 {
  font-size: clamp(1.18rem, .95rem + 1.1vw, 1.95rem);
  margin: .55rem 0 .45rem; max-width: 18ch; line-height: 1;
}
.porte > p { font-size: var(--t-sm); margin-bottom: 1.1rem; max-width: 38ch; }
.porte-fin { font-size: .82rem; padding-top: .8rem; }

/* --- 22 f. Appel final : même typographie que les autres titres --------- */

.cta-final { max-width: 52rem; }
.cta-final h2 {
  font-family: var(--t); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem); line-height: .96;
  letter-spacing: -.028em; margin: 0 0 .6rem;
}
.cta-final .chapo { font-size: var(--t-md); }
.cta-final .communes {
  margin: 1.8rem auto 0; font-size: var(--t-xs); line-height: 1.8;
  color: rgba(250, 245, 236, .5); max-width: 54ch;
}

/* --- 22 g. WhatsApp : pastille seule, sans libellé en dur -------------- */

.wa-txt {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
@media (min-width: 48rem) { .wa-txt { display: none; } }

/* Les portes sont a bord perdu, mais leur texte s'aligne sur la colonne
   de contenu comme tout le reste de la page.                                */
@media (min-width: 50rem) {
  .porte:first-child { padding-left: max(var(--marge), calc((100vw - var(--max)) / 2 + var(--marge))); }
  .porte:last-child { padding-right: max(var(--marge), calc((100vw - var(--max)) / 2 + var(--marge))); }
}
.bord-perdu > .shell + .piste { margin-top: 0; }

/* --- 23 c. Titre de rang : plus de surtitre, juste le nom -------------- */

.tete-rang { align-items: center; padding-bottom: .9rem; }
.tete-rang h2 { font-size: clamp(1.15rem, .98rem + .8vw, 1.6rem); letter-spacing: .01em; }

/* --- 23 e. Appel final : un titre, deux boutons, les communes ---------- */

.cta-final { text-align: center; }
.cta-final .btns { margin-top: 1.5rem; }

/* --- 24 b. Des apparitions differentes selon la nature du bloc --------- */

.montre--doux { opacity: 0; transform: none; transition: opacity .9s ease; }
.montre--doux.vu { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .montre--doux, .montre--lent { opacity: 1; transform: none; }
}

/* ==========================================================================
   25. Épuré
   Moins de blocs sombres, moins de capitales, plus de blanc.
   Le seul moment typographique fort de la page est la ligne des clients ;
   les seules images pleine largeur sont les deux portes. Tout le reste
   se tait.
   ========================================================================== */

/* --- 25 a. Respiration ------------------------------------------------- */

.section { padding-block: clamp(4.2rem, 8.5vw, 7.5rem); }

/* --- 25 b. Le bandeau : une ligne, deux filets ------------------------- */

.bandeau { border-block: 1px solid var(--trait); }
.bandeau-int {
  display: flex; flex-wrap: wrap; gap: .5rem clamp(1.2rem, 3vw, 2.6rem);
  margin: 0 auto; padding-block: .95rem;
  font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase;
  color: var(--encre-2);
}
.bandeau-int span { display: inline-flex; align-items: center; }
.bandeau-int span + span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--trait); margin-right: clamp(1.2rem, 3vw, 2.6rem);
  margin-left: calc(-1 * clamp(1.2rem, 3vw, 2.6rem) / 2 - 1.5px);
}

/* --- 25 c. Titres de section : une étiquette, pas une affiche ---------- */

.tete-rang { border-bottom: 0; padding-bottom: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.tete-rang h2 {
  font-family: var(--t); font-weight: 600; text-transform: uppercase;
  font-size: var(--t-xs); letter-spacing: .2em; line-height: 1;
  color: var(--encre-3);
}
.tete-rang .fleche {
  font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--encre-3); border-bottom: 0;
}
.tete-rang .fleche:hover { color: var(--olive); }

/* --- 25 e. Les deux portes : le voile s'allège ------------------------- */

.porte { min-height: clamp(15rem, 30vw, 22rem); }
.porte::after {
  background: linear-gradient(to top, rgba(59, 34, 12,.84) 0%, rgba(59, 34, 12,.4) 55%, rgba(59, 34, 12,.14) 100%);
}
.porte:hover::after {
  background: linear-gradient(to top, rgba(59, 34, 12,.9) 0%, rgba(59, 34, 12,.5) 58%, rgba(59, 34, 12,.2) 100%);
}
.porte h3 {
  font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.1rem, .92rem + .85vw, 1.65rem);
}
.porte-eti { font-size: .68rem; letter-spacing: .22em; }
.porte-fin { font-size: .74rem; letter-spacing: .12em; font-weight: 600; }

/* --- 25 g. Appel final : un filet, un titre, deux boutons -------------- */

.section--fin { border-top: 1px solid var(--trait); }
.cta-final h2 {
  font-family: var(--t); font-weight: 700; text-transform: none;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem); letter-spacing: -.03em;
  color: var(--encre); margin: 0;
}
.cta-final .communes {
  color: var(--encre-3); margin-top: 2rem;
  font-size: var(--t-xs); line-height: 1.9; max-width: 52ch;
  margin-inline: auto;
}

/* --- 25 h. WhatsApp : la pastille prend la couleur du site ------------- */

.wa-rond { background: #25D366; width: 48px; height: 48px; box-shadow: 0 4px 16px rgba(59, 34, 12,.22); }
.wa svg { width: 24px; height: 24px; }

/* ==========================================================================
   26. Angles arrondis
   Les angles vifs etaient une decision de ma part, pas une demande.
   Ils sont remplaces par un systeme de rayons a trois valeurs : les grands
   panneaux et les images, les boutons et les champs, les petits elements.
   Un rayon unique partout est justement un des signaux du gabarit genere ;
   ici ils varient avec la taille de l'element.
   ========================================================================== */

:root {
  --r:    20px;   /* panneaux, photos pleine largeur, formulaire */
  --r-sm: 12px;   /* boutons, champs de saisie */
  --r-xs:  9px;   /* petits elements */
  --r-img: 14px;  /* vignettes du carrousel */

  --ombre: 0 1px 2px rgba(59, 34, 12, .045),
           0 14px 36px -24px rgba(59, 34, 12, .3);
}

/* --- 26 b. Les deux portes : deux panneaux poses, plus une bande ------- */

/* Un panneau colle aux bords ne montre pas ses angles. On les rentre,
   comme l'image du heros qui est deja en retrait de .75rem.              */
#portes { padding: clamp(.7rem, 1.4vw, 1.1rem) 0; }
.portes {
  padding-inline: clamp(.7rem, 1.4vw, 1.1rem);
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.porte { border-radius: var(--r); }

/* --- 26 d. Le bouton rond de WhatsApp garde sa forme ------------------- */

.wa-rond { border-radius: 50%; }

/* --- 26 e. Les portes sont des panneaux : marge interne uniforme ------- */
/* La regle d'alignement sur la colonne de contenu valait quand elles
   etaient a bord perdu. En panneau pose, elle desequilibre les deux.     */
@media (min-width: 50rem) {
  .porte:first-child, .porte:last-child {
    padding-left: clamp(1.4rem, 3vw, 2.6rem);
    padding-right: clamp(1.4rem, 3vw, 2.6rem);
  }
}

/* ==========================================================================
   27. Moins de lumiere, moins d'ombre
   Les images etaient chacune une petite mise en lumiere : degrade, halo,
   vignetage, ligne mur/sol. Ce sont maintenant des aplats calmes. Le corps
   de la page perd ses ombres portees ; seul le panneau du heros garde la
   sienne, il n'est pas touche.
   ========================================================================== */

:root { --ombre: none; }

/* --- 27 a. Le voile des deux portes devient plat ----------------------- */

.porte::after { background: rgba(59, 34, 12, .5); transition: background .3s ease; }
.porte:hover::after { background: rgba(59, 34, 12, .62); }

/* --- 27 b. Plus d'ombre portee dans le corps --------------------------- */

.wa-rond { box-shadow: none; }

/* --- 27 c. Pied de page : trois colonnes ------------------------------- */

@media (min-width: 52rem) {
  .pied-grille { grid-template-columns: 1.4fr 1fr 1.2fr; }
}
.cta-final .communes { margin-top: 1.6rem; letter-spacing: .04em; }

/* ==========================================================================
   28. Pages interieures
   Cinq composants, pas un de plus : l'ouverture de page, le poste de
   travail, l'etape, la question, la fiche de renseignements.
   ========================================================================== */

/* --- 28 a. Ouverture de page ------------------------------------------ */

.intro {
  padding-block: clamp(6.5rem, 12vw, 9.5rem) clamp(2.4rem, 5vw, 4rem);
  border-bottom: 1px solid var(--trait);
}
.intro .surtitre { margin-bottom: .7rem; }
.intro h1 {
  font-family: var(--t); font-weight: 700; letter-spacing: -.035em;
  font-size: clamp(1.8rem, 1.2rem + 2.7vw, 3.2rem); line-height: 1;
  margin: 0; max-width: 18ch;
}
.intro p {
  margin: 1.1rem 0 0; max-width: 46ch;
  font-size: var(--t-lg); color: var(--encre-2); line-height: 1.55;
}

.detail { margin: 0; }
.detail dt {
  font-family: var(--t); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3);
  padding-top: 1rem; border-top: 1px solid var(--trait); margin-top: 1rem;
}
.detail dt:first-of-type { margin-top: 0; }
.detail dd {
  margin: .45rem 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--encre-2);
}
.detail dd b { color: var(--encre); font-weight: 600; }

/* --- 28 c. Les etapes -------------------------------------------------- */

.pas { display: grid; gap: 0; counter-reset: pas; }
@media (min-width: 56rem) { .pas { grid-template-columns: repeat(4, 1fr); } }
.pas > li {
  list-style: none; margin: 0; counter-increment: pas;
  padding: 1.3rem 0; border-top: 1px solid var(--trait);
}
@media (min-width: 56rem) {
  .pas > li { border-top: 1px solid var(--trait); padding: 1.3rem clamp(1rem, 2vw, 1.8rem) 0 0; }
}
.pas > li::before {
  content: counter(pas, decimal-leading-zero);
  display: block; font-family: var(--t); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; color: var(--olive); margin-bottom: .55rem;
}
.pas h3 {
  font-family: var(--t); font-weight: 600; font-size: var(--t-md);
  letter-spacing: -.01em; margin: 0 0 .35rem;
}
.pas p { margin: 0; font-size: var(--t-sm); color: var(--encre-2); line-height: 1.55; }

/* --- 28 d. Les questions ----------------------------------------------- */

.qr { max-width: 54rem; }
.qr details { border-top: 1px solid var(--trait); }
.qr details:last-of-type { border-bottom: 1px solid var(--trait); }
.qr summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative; font-family: var(--t); font-weight: 600;
  font-size: var(--t-md); letter-spacing: -.012em;
}
.qr summary::-webkit-details-marker { display: none; }
.qr summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--encre-3); border-bottom: 2px solid var(--encre-3);
  transform: rotate(45deg); transition: transform .25s ease;
}
.qr details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.qr summary:hover { color: var(--olive); }
.qr details > div {
  padding: 0 2.5rem 1.4rem 0; font-size: var(--t-sm);
  line-height: 1.65; color: var(--encre-2); max-width: 62ch;
}
.qr details > div p { margin: 0 0 .7rem; }
.qr details > div p:last-child { margin: 0; }
.qr small { display: block; margin-top: .6rem; font-size: var(--t-xs); color: var(--encre-3); }

/* --- 28 e. La fiche de renseignements ---------------------------------- */

.fiche { margin: 0; display: grid; gap: 0; }
@media (min-width: 42rem) { .fiche { grid-template-columns: 14rem 1fr; } }
.fiche dt {
  font-family: var(--t); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3);
  padding: 1rem 0 .2rem; border-top: 1px solid var(--trait);
}
.fiche dd { margin: 0; padding: .2rem 0 1rem; font-size: var(--t-sm); color: var(--encre-2); }
@media (min-width: 42rem) {
  .fiche dt { padding: 1rem 1rem 1rem 0; }
  .fiche dd { padding: 1rem 0; border-top: 1px solid var(--trait); }
}

/* --- 28 f. Deux colonnes : formulaire et renseignements ---------------- */

.duo-contact { display: grid; gap: clamp(2.2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 58rem) { .duo-contact { grid-template-columns: 1.15fr .85fr; } }
.encart {
  background: var(--panneau); border-radius: var(--r);
  padding: clamp(1.3rem, 3vw, 2.2rem); border: 1px solid var(--trait);
}
.encart h2 { font-family: var(--t); font-weight: 700; font-size: var(--t-xl); letter-spacing: -.025em; margin: 0 0 1.1rem; }

/* --- 28 g. Variantes ---------------------------------------------------- */

.pas--colonne { grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .pas--colonne { grid-template-columns: 1fr; }
  .pas--colonne > li { padding: 1.15rem 0 0; border-top: 1px solid var(--trait); }
}
.bloc-etroit { max-width: 54rem; }

/* Le formulaire dans l'encart de contact ne refait pas sa propre boite */
.encart form { margin: 0; }
.encart form > .champ:first-of-type,
.encart form > .champ-duo:first-of-type { margin-top: 0; }

/* Dans une paire, l'ecart vient de la grille ; sans ca les deux champs
   ne demarrent pas a la meme hauteur.                                   */
.champ-duo { margin-top: .9rem; }
.champ-duo > .champ { margin-top: 0; }
.pied ul a,
.pied-bas nav a,
main ul:not([class]) a,
.plan a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 0; }

/* Cibles tactiles de 44 px : le logo, le fil d'Ariane et les coordonnees
   seules dans une cellule de tableau (mentions legales).                 */
.marque { min-height: 44px; }
.fil a, .surtitre > a { display: inline-flex; align-items: center; min-height: 44px; }
.texte td > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   29. De la matiere dans les pages
   ========================================================================== */

/* --- 29 a. Bande d'image sous l'ouverture de page ---------------------- */

.bande-img {
  padding: clamp(.7rem, 1.4vw, 1.1rem);
}
.bande-img img {
  width: 100%; height: clamp(11rem, 26vw, 20rem);
  object-fit: cover; border-radius: var(--r); display: block;
}

/* --- 29 b. Grille de matieres ------------------------------------------ */

/* Huit matieres, deux ou quatre colonnes : la grille tombe juste aux deux
   largeurs, aucune cellule vide en fin de rangee.                          */
.matieres {
  display: grid; gap: clamp(.7rem, 1.6vw, 1.3rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 44rem) { .matieres { grid-template-columns: repeat(4, 1fr); } }

.matiere { margin: 0; }
.matiere img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-img); display: block; background: var(--fond-2);
}
.matiere figcaption {
  margin-top: .6rem; font-family: var(--t); font-weight: 600;
  font-size: var(--t-sm); letter-spacing: -.01em;
}
.matiere small {
  display: block; margin-top: .12rem; font-size: var(--t-xs);
  color: var(--encre-3); line-height: 1.4;
}

/* --- 29 c. Deux colonnes : une image, un texte ------------------------- */

.duo-bloc { display: grid; gap: clamp(1.4rem, 3vw, 2.8rem); align-items: center; }
@media (min-width: 56rem) {
  .duo-bloc { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
  .duo-bloc--inverse > figure { order: 2; }
}
.duo-bloc figure { margin: 0; }
.duo-bloc img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r); display: block; background: var(--fond-2);
}
.duo-bloc h2 {
  font-family: var(--t); font-weight: 700; letter-spacing: -.028em;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.8rem); line-height: 1.04; margin: 0 0 .9rem;
}
.duo-bloc p { font-size: var(--t-md); color: var(--encre-2); margin: 0 0 1rem; max-width: 46ch; }

/* --- 29 d. Grille de communes ------------------------------------------ */

.communes-grille {
  display: grid; gap: 0 clamp(1rem, 2.5vw, 2.4rem);
  grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none;
}
@media (min-width: 44rem) { .communes-grille { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .communes-grille { grid-template-columns: repeat(4, 1fr); } }
.communes-grille li {
  margin: 0; padding: .72rem 0; border-top: 1px solid var(--trait);
  font-size: var(--t-sm); display: flex; justify-content: space-between; gap: 1rem;
}
.communes-grille b { font-weight: 500; }
.communes-grille span { color: var(--encre-3); font-size: var(--t-xs); }

/* --- 29 e. Deux blocs illustres dans une seule section ----------------- */
/* Deux sections consecutives, c'est deux fois la marge de section : plus de
   200 px de vide entre deux blocs qui parlent de la meme chose.           */
.duos { display: grid; gap: clamp(2.6rem, 5.5vw, 4.5rem); }
.duo-bloc img { aspect-ratio: 3 / 2; }
.duo-bloc > div > .detail { margin-top: .4rem; }

.publics { display: grid; gap: .5rem; max-width: 56rem; }

.public {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--r-sm);
  transition: border-color .25s ease, background .25s ease;
}
.public:hover { border-color: var(--olive-clair); }
.public[open] { border-color: var(--encre); }

.public > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.1rem);
  padding: clamp(.95rem, 2vw, 1.35rem) clamp(1rem, 2.2vw, 1.6rem);
  font-family: var(--t); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.84rem, .8rem + .3vw, 1rem); letter-spacing: .055em;
  line-height: 1.2;
}
.public > summary::-webkit-details-marker { display: none; }
.public > summary::marker { content: ""; }
.public > summary:focus-visible { outline: 3px solid var(--olive); outline-offset: -3px; border-radius: var(--r-sm); }

.pastille {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--olive); display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .25s ease;
}
.pastille svg { width: 13px; height: 13px; stroke: #FFF; fill: none; stroke-width: 2.6; stroke-linecap: round; }
.public[open] .pastille { transform: rotate(135deg); background: var(--encre); }

.public > div {
  padding: 0 clamp(1rem, 2.2vw, 1.6rem) clamp(1.05rem, 2.2vw, 1.4rem);
  font-size: var(--t-md); line-height: 1.6; color: var(--encre-2); max-width: 62ch;
}
@media (min-width: 40rem) {
  .public > div { padding-left: calc(clamp(1rem, 2.2vw, 1.6rem) + 26px + clamp(.8rem, 1.6vw, 1.1rem)); }
}

@media (prefers-reduced-motion: reduce) { .pastille { transition: none; } }

/* ==========================================================================
   32. Hierarchie des titres
   Pendant la passe « epure », tous les titres de section sont devenus des
   etiquettes de 12 px en gris : on ne les voyait plus. Deux corrections :
   l'etiquette passe en encre et grandit un peu ; la section « Pour qui »
   recoit un vrai titre, parce que c'est elle qui porte un message.
   ========================================================================== */

.tete-rang h2 {
  font-size: clamp(.88rem, .84rem + .28vw, 1.02rem);
  letter-spacing: .17em; color: var(--encre); font-weight: 700;
}
.tete-rang { border-bottom: 1px solid var(--trait); padding-bottom: .9rem; }

.tete-qui { margin-bottom: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 46rem; }
.tete-qui h2 {
  font-family: var(--t); font-weight: 700; text-transform: none;
  font-size: clamp(1.6rem, 1.1rem + 2.3vw, 2.85rem); line-height: 1.02;
  letter-spacing: -.035em; color: var(--encre); margin: 0;
}
.tete-qui p {
  margin: .95rem 0 0; max-width: 48ch;
  font-size: var(--t-lg); line-height: 1.5; color: var(--encre-2);
}

/* Les six cartes se recentrent sous le panneau */
.publics { margin-inline: auto; }

/* ==========================================================================
   34. « Avec qui » : une bande claire sur toute la largeur
   Plus de panneau sombre pose au milieu. La section prend toute la page
   dans un ton creme tres clair, les six cartes passent en blanc pur pour
   s'en detacher, et le titre est centre sans encadrement.
   ========================================================================== */

:root { --fond-clair: #F6EEE1; }   /* creme, plus clair que le sable --fond-2 */

.section--clair { background: var(--fond-clair); }

.tete-qui {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 4vw, 3.2rem);
}
.tete-qui h2 {
  font-family: var(--t); font-weight: 700; text-transform: none;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.1rem); line-height: 1.02;
  letter-spacing: -.035em; color: var(--encre); margin: 0; text-wrap: balance;
}
.tete-qui p {
  margin: 1rem auto 0; max-width: 44ch;
  font-size: var(--t-lg); line-height: 1.5; color: var(--encre-2);
}

/* Sur la bande creme, les cartes passent en blanc pur : c'est le blanc qui
   les detache, plus la bordure.                                            */
.section--clair .public { background: #FFF; border-color: #E8D8BF; }
.section--clair .public:hover { border-color: var(--olive-clair); }
.section--clair .public[open] { border-color: var(--encre); }

/* ==========================================================================
   35. « Ce qui change pour vous »
   La page disait ce qu'on fait et avec qui, jamais pourquoi nous. Six
   engagements, photo au-dessus et legende en dessous, puis un bouton :
   la section se termine sur une action, pas sur un constat.
   Six cartes sur deux ou trois colonnes : la grille tombe juste aux deux
   largeurs, aucune cellule vide.
   ========================================================================== */

.atouts {
  display: grid; gap: clamp(1.1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 56rem) { .atouts { grid-template-columns: repeat(3, 1fr); } }

.atout { margin: 0; }
.atout img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-img); display: block; background: var(--fond-2);
}
.atout h3 {
  font-family: var(--t); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.82rem, .78rem + .3vw, .98rem); letter-spacing: .045em;
  line-height: 1.22; margin: .95rem 0 .35rem; color: var(--encre);
}
.atout p {
  margin: 0; font-size: var(--t-sm); line-height: 1.55;
  color: var(--encre-2); max-width: 38ch;
}

/* --- 35 bis. L'appel final devient la destination de la page ----------- */
/* Deux boutons a quelques centimetres l'un de l'autre se neutralisent.
   Un seul, sur une bande claire, avec une phrase qui leve le frein.      */

.section--clair.section--fin { border-top: 0; }
.cta-final h2 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.85rem); line-height: 1.02; }
.cta-sous {
  margin: 1rem auto 0; max-width: 44ch;
  font-size: var(--t-lg); line-height: 1.5; color: var(--encre-2);
}
.cta-final .btns { margin-top: 1.9rem; }
.cta-final .btn { padding-block: 1rem; }

/* ==========================================================================
   36. Les engagements passent a l'horizontale
   Rail qui file jusqu'au bord de l'ecran, glissement a la souris et au
   doigt, deux fleches pour ceux qui n'y pensent pas. Pas de defilement
   automatique : celui des prestations suffit, deux rails qui bougent en
   meme temps, c'est le vertige.
   ========================================================================== */

.atouts {
  display: flex; grid-template-columns: none;
  gap: clamp(.8rem, 1.8vw, 1.4rem);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  cursor: grab;
  padding-left: max(var(--marge), calc((100vw - var(--max)) / 2 + var(--marge)));
  padding-right: clamp(2rem, 6vw, 6rem);
  /* Sans cette ligne, l'accrochage colle la premiere carte au bord de
     l'ecran et mange la marge de gauche.                               */
  scroll-padding-left: max(var(--marge), calc((100vw - var(--max)) / 2 + var(--marge)));
  -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 clamp(1.5rem, 5vw, 5rem),
      #000 calc(100% - clamp(1.5rem, 5vw, 5rem)), transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0, #000 clamp(1.5rem, 5vw, 5rem),
      #000 calc(100% - clamp(1.5rem, 5vw, 5rem)), transparent 100%);
}
.atouts::-webkit-scrollbar { display: none; }
.atouts.tire { cursor: grabbing; scroll-snap-type: none; }

.atout {
  flex: 0 0 min(78vw, 20.5rem);
  scroll-snap-align: start;
}
.atout p { max-width: none; }

/* --- 36 b. Les deux fleches -------------------------------------------- */

.rail-cmd {
  display: flex; justify-content: center; gap: .6rem;
  margin-top: clamp(1.6rem, 3.2vw, 2.4rem);
}
.rail-fl {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--encre-3); background: var(--panneau);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}
.rail-fl svg { width: 19px; height: 19px; fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rail-fl:hover { border-color: var(--encre); background: var(--fond-3); }
.rail-fl:disabled { opacity: .3; cursor: default; }
.rail-fl:disabled:hover { border-color: var(--trait); background: var(--panneau); }
/* --- 36 c. Les engagements quittent le rail ------------------------------ */
/* Deux rails de photos l'un sous l'autre se confondaient avec les
   prestations. Les engagements passent sur fond sombre, sans photo, en
   liste : ce qu'on fait se montre, ce qu'on promet se lit.     */

#atouts { background: var(--brun); }
#atouts .tete-qui h2 { color: var(--fond); }
#atouts .tete-qui p { color: #E8D9C4; }

.engagements {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid rgba(250, 245, 236, .16);
}
@media (min-width: 40rem) { .engagements { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); } }
@media (min-width: 64rem) { .engagements { grid-template-columns: repeat(3, 1fr); } }

.engagement {
  padding: clamp(1.4rem, 2.6vw, 2rem) 0;
  border-bottom: 1px solid rgba(250, 245, 236, .16);
}
/* Un trait, pas un numero : on nomme les engagements, on ne les compte pas. */
.engagement::before {
  content: ""; display: block; width: 2.2rem; height: 3px; border-radius: 2px;
  margin-bottom: 1.1rem; background: var(--caramel);
}
.engagement h3 {
  font-family: var(--t); font-weight: 700; text-transform: none;
  font-size: var(--t-lg); line-height: 1.25; letter-spacing: -.01em;
  margin: 0 0 .45rem; color: var(--fond);
}
.engagement p {
  margin: 0; font-size: var(--t-sm); line-height: 1.6;
  color: #E8D9C4; max-width: 40ch;
}

.metier-d .btn { padding: .72rem 1.3rem; }


/* ==========================================================================
   39. Cartes de service
   Le mieux reference du secteur (msg-renovation.ch) a une page par service,
   pas une page qui les liste toutes : c'est ce qui lui vaut quatre des dix
   premiers resultats. La page Prestations devient un index de cartes, et
   chaque carte mene a une vraie page.
   ========================================================================== */

.cartes-service { display: grid; gap: clamp(1.2rem, 2.6vw, 2.2rem); }
@media (min-width: 50rem) { .cartes-service { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .cartes-service { grid-template-columns: repeat(3, 1fr); } }

.carte-s {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.carte-s-img {
  border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--fond-2); margin-bottom: 1rem;
}
.carte-s-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.carte-s:hover .carte-s-img img { transform: scale(1.04); }
.carte-s h2 {
  font-family: var(--t); font-weight: 600; letter-spacing: -.028em;
  font-size: clamp(1.1rem, .95rem + .75vw, 1.5rem); line-height: 1.08;
  margin: 0 0 .4rem; transition: color .2s ease;
}
.carte-s:hover h2 { color: var(--olive); }
.carte-s > p { margin: 0 0 .9rem; font-size: var(--t-sm); color: var(--encre-2); line-height: 1.5; }
.carte-s ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.carte-s li {
  margin: 0; padding: .4rem 0 .4rem 1.1rem; position: relative;
  font-size: var(--t-sm); color: var(--encre-2);
  border-top: 1px solid var(--trait);
}
.carte-s li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--olive);
}
.carte-s-fin {
  margin-top: auto; font-family: var(--t); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--olive);
  display: inline-flex; align-items: center; gap: .45rem;
}
.carte-s-fin svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .22s cubic-bezier(.22,1,.36,1); }
.carte-s:hover .carte-s-fin svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .carte-s-img img, .carte-s-fin svg { transition: none; }
  .carte-s:hover .carte-s-img img { transform: none; }
}

/* --- 39 b. Page de service : les deux boutons sous l'accroche ---------- */

.intro .btns { margin-top: 1.6rem; }
.intro-note { margin-top: .9rem; font-size: var(--t-sm); color: var(--encre-3); }

/* --- 39 c. Les autres postes, en bas de page de service ---------------- */

.autres { display: grid; gap: .5rem; }
@media (min-width: 46rem) { .autres { grid-template-columns: repeat(2, 1fr); } }
.autre {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.1rem; text-decoration: none; color: inherit;
  background: var(--panneau); border: 1px solid var(--trait);
  border-radius: var(--r-sm);
  transition: border-color .2s ease;
}
.autre:hover { border-color: var(--encre); }
.autre img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-xs); flex: none; }
.autre b { font-family: var(--t); font-weight: 600; font-size: var(--t-sm); letter-spacing: -.01em; }
.autre span { display: block; font-size: var(--t-xs); color: var(--encre-3); margin-top: .1rem; }

/* --- 39 d. Raccord : un titre centre, un bloc centre -------------------- */
.tete-qui + .detail.bloc-etroit,
.tete-qui + .qr { margin-inline: auto; }

/* ==========================================================================
   40. Sous-menu des prestations
   « Prestations » reste cliquable et mene a l'index. Le chevron a cote
   ouvre la liste des six postes : au survol et au clavier sur ordinateur,
   au doigt dans le menu replie.
   ========================================================================== */

.menu-dep { position: relative; display: inline-flex; align-items: center; gap: .15rem; }

.menu-fl {
  border: 0; background: none; margin: 0; cursor: pointer;
  width: 26px; height: 26px; padding: 0;   /* 26 px : au-dessus du seuil de 24 */
  display: grid; place-items: center; color: var(--encre-2); line-height: 0;
}
.menu-fl svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.menu-dep:hover .menu-fl, .menu-fl[aria-expanded="true"] { color: var(--encre); }
.menu-fl[aria-expanded="true"] svg { transform: rotate(180deg); }

.sous-menu a { display: block; }

@media (min-width: 62rem) {
  .sous-menu {
    position: absolute; top: calc(100% + .7rem); left: -.9rem;
    min-width: 16.5rem; padding: .45rem;
    background: var(--panneau); border: 1px solid var(--trait);
    border-radius: var(--r-sm); box-shadow: 0 18px 40px -26px rgba(59, 34, 12, .45);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 30;
  }
  .menu-dep:hover > .sous-menu,
  .menu-dep:focus-within > .sous-menu,
  .sous-menu.on { opacity: 1; visibility: visible; transform: none; }

  /* Pont invisible : la souris peut descendre sans que le panneau se ferme. */
  .menu-dep::after {
    content: ""; position: absolute; top: 100%; left: -.9rem; right: -.9rem;
    height: .9rem;
  }

  .sous-menu a {
    padding: .62rem .8rem; border-radius: var(--r-xs); border-bottom: 0;
    font-size: var(--t-sm); color: var(--encre-2); white-space: nowrap;
  }
  .sous-menu a:hover { background: var(--fond-2); color: var(--encre); border-color: transparent; }
  .sous-menu a:first-child {
    font-weight: 600; color: var(--encre);
    border-bottom: 1px solid var(--trait); border-radius: 0; margin-bottom: .25rem;
  }
}

/* Menu replie : la liste se deplie sur place, decalee vers la droite. */
@media (max-width: 61.99rem) {
  .menu-dep { display: block; position: relative; border-bottom: 1px solid var(--trait); }
  .menu-dep > a { border-bottom: 0; }
  .menu-fl {
    position: absolute; right: .2rem; top: .45rem;
    width: 38px; height: 38px; border-radius: 50%;
  }
  .sous-menu { display: none; padding: 0 0 .6rem .9rem; }
  .sous-menu.on { display: block; }
  .sous-menu a {
    padding: .62rem .4rem; font-size: var(--t-sm); color: var(--encre-2);
    border-bottom: 1px solid var(--trait);
  }
  .sous-menu a:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) { .menu-fl svg, .sous-menu { transition: none; } }

/* ==========================================================================
   41. En-tete sur petit ecran : le burger revient dans l'ecran
   Mesure : marque 161 px + bouton 176 px + burger 44 px + deux ecarts de
   19 px = 419 px. Sur un telephone de 390 px, le burger se retrouvait a
   x = 408, hors de l'ecran : le menu etait tout simplement inaccessible de
   320 a 414 px. Le bouton « Devis gratuit » quitte l'en-tete sous 30 rem ;
   il reste dans la barre fixe du bas, avec « Appeler ».
   ========================================================================== */

@media (max-width: 29.99rem) {
  .entete > .entete-int > .btn { display: none; }
  .marque span { font-size: .98rem; }
  .marque svg { width: 27px; height: 27px; }
  .entete-int { gap: .8rem; }
}

/* ==========================================================================
   42. Le sous-menu s'ouvre au survol, point
   Sur ordinateur le chevron n'est plus qu'un indicateur : il ne reagit plus
   au clic, pour que rien ne laisse croire qu'il faut cliquer. Le survol du
   mot ouvre le panneau, le clavier aussi, et la souris peut descendre dedans
   en diagonale sans qu'il se referme.
   ========================================================================== */

@media (min-width: 62rem) {
  /* Indicateur, pas commande. */
  .menu-fl { pointer-events: none; }

  .sous-menu {
    transform: translateY(4px) scale(.985); transform-origin: top left;
    transition: opacity .16s ease, transform .16s cubic-bezier(.22, 1, .36, 1), visibility .16s;
  }
  .menu-dep:hover > .sous-menu,
  .menu-dep:focus-within > .sous-menu { transform: none; }

  /* Zone d'approche elargie : le panneau reste ouvert quand on coupe en
     diagonale vers le premier lien.                                      */
  .menu-dep::after { left: -1.6rem; right: -1.6rem; height: 1.3rem; }

  .sous-menu a { transition: background .15s ease, color .15s ease, padding-left .18s ease; }
  .sous-menu a:hover { padding-left: 1.05rem; }

  .sous-menu a[aria-current="page"] {
    background: var(--fond-2); color: var(--encre); font-weight: 600;
  }
}

/* La rubrique courante dans le menu, quand on est sur une page de service */
.menu a[aria-current="true"] { color: var(--encre); border-color: var(--olive); }

/* --- 42 b. Cartes de service, version courte (accueil) ----------------- */
/* Sur l'accueil, pas de puces : la photo, le nom, une ligne. Le detail
   vit sur la page du poste. */
.carte-s--court h3 {
  font-family: var(--t); font-weight: 600; letter-spacing: -.028em;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem); line-height: 1.1;
  margin: 0 0 .35rem;
  transition: color .2s ease;
}
.carte-s--court:hover h3 { color: var(--olive); }
.carte-s--court > p { margin-bottom: .8rem; }

/* ==========================================================================
   43. Appel a l'action intercale
   Sur les pages longues, un seul bouton tout en bas ne suffit pas : le
   visiteur decide au moment ou il est convaincu, pas a la fin. Ce bandeau
   se glisse entre deux sections.
   ========================================================================== */

.relance {
  background: var(--encre); color: var(--panneau);
  border-radius: var(--r);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 3rem);
  display: grid; gap: clamp(1rem, 2.5vw, 2rem); align-items: center;
}
@media (min-width: 52rem) { .relance { grid-template-columns: 1fr auto; } }
.relance h2 {
  font-family: var(--t); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); line-height: 1.1;
  margin: 0 0 .4rem; color: #FFF;
}
.relance p { margin: 0; font-size: var(--t-sm); color: rgba(250, 245, 236, .74); max-width: 48ch; }
.relance .btns { flex: none; }
.relance .btn { background: var(--panneau); color: var(--encre); }
.relance .btn:hover { background: #FFF; }
.relance .btn--creux { background: transparent; color: #FFF; border-color: rgba(255,255,255,.5); }
.relance .btn--creux:hover { background: rgba(255,255,255,.12); border-color: #FFF; }

/* --- 43 b. Deux colonnes de repères, sans photo ------------------------ */

.reperes { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (min-width: 52rem) { .reperes { grid-template-columns: repeat(2, 1fr); } }
.repere { border-top: 1px solid var(--trait); padding-top: 1rem; }
.repere h3 {
  font-family: var(--t); font-weight: 600; font-size: var(--t-lg);
  letter-spacing: -.02em; margin: 0 0 .4rem;
}
.repere p { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--encre-2); }
.repere p b { color: var(--encre); font-weight: 600; }

/* La relance ferme la section qui la precede : une seule marge au lieu de deux */
.relance--suite { margin-top: clamp(2.4rem, 5vw, 4rem); }

/* ==========================================================================
   44. Accueil : « Ce qu'on refait chez vous » a l'horizontale
   Rail de six vignettes qui avance tout seul, s'arrete des qu'on le touche
   et se glisse a la souris comme au doigt. Chaque vignette mene a la page
   du poste.
   ========================================================================== */

.rail-postes {
  display: flex; gap: clamp(.6rem, 1.4vw, 1.1rem);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  cursor: grab;
  padding-left: max(var(--marge), calc((100vw - var(--max)) / 2 + var(--marge)));
  padding-right: clamp(2rem, 6vw, 6rem);
  -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 clamp(1.5rem, 5vw, 5rem),
      #000 calc(100% - clamp(1.5rem, 5vw, 5rem)), transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0, #000 clamp(1.5rem, 5vw, 5rem),
      #000 calc(100% - clamp(1.5rem, 5vw, 5rem)), transparent 100%);
}
.rail-postes::-webkit-scrollbar { display: none; }
.rail-postes.tire { cursor: grabbing; user-select: none; }

/* Pas d'accrochage (scroll-snap) : il ramenerait le rail en arriere a
   chaque pixel de l'avance automatique.                                  */
.poste-t img { -webkit-user-drag: none; user-select: none; }

.poste-t {
  flex: 0 0 min(64vw, 17.5rem); margin: 0;
  display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none; color: inherit;
}
.poste-t span.img {
  display: block; overflow: hidden; border-radius: var(--r-img);
  height: clamp(9.5rem, 21vw, 14.5rem); background: var(--fond-2);
}
.poste-t img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}
.poste-t:hover img { transform: scale(1.04); }
.poste-t b {
  font-family: var(--t); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(.9rem, .86rem + .2vw, 1.02rem); line-height: 1.18;
  color: var(--encre); transition: color .2s ease;
}
.poste-t:hover b { color: var(--olive); }
.poste-t em {
  display: block; font-style: normal; margin-top: .18rem;
  font-size: .82rem; color: var(--encre-3); line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
  .poste-t img { transition: none; }
  .poste-t:hover img { transform: none; }
}

/* ==========================================================================
   45. Accessibilite clavier (audit du 18 octobre 2026)
   Echap referme le sous-menu meme si le focus est encore dedans ; sur les
   fonds bruns, le contour de focus passe au beige du logo pour rester
   visible.
   ========================================================================== */

.menu-dep.ferme > .sous-menu { opacity: 0 !important; visibility: hidden !important; }
.pied :focus-visible, #atouts :focus-visible { outline-color: var(--or); }

/* ==========================================================================
   46. Telephone (moins de 768 px) — rien ici ne touche l'ordinateur
   Boutons a pleine largeur au lieu de deux largeurs differentes, ouverture
   de page plus serree, photo de bande plus haute, et WhatsApp range dans la
   barre du bas au lieu de flotter par-dessus le texte.
   ========================================================================== */

@media (max-width: 47.99rem) {
  .btns { flex-direction: column; align-items: stretch; }
  .btns .btn { width: 100%; }

  .intro { padding-block: 6.2rem 1.8rem; }
  .intro p { font-size: 1.05rem; }
  .intro .btns { margin-top: 1.3rem; }
  .intro-note { font-size: .82rem; text-align: center; }

  .bande-img img { height: 15rem; }

  .heros-note { display: none; }
}

@media (max-width: 61.99rem) {
  .wa { display: none; }
  .barre-mob { padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom)); }
  .barre-mob .btn { font-size: .86rem; padding-inline: .7rem; }
  .barre-mob .btn--wa { flex: 0 0 3.2rem; padding: 0; background: #25A65A; }
  .barre-mob .btn--wa:hover { background: #1E8A4A; }
  .barre-mob .btn--wa svg { width: 24px; height: 24px; fill: #FFF; }
}

/* Menu replie : « Prestations » prend toute la ligne (le chevron tombait
   sur le trait), et le bouton garde son texte clair (la couleur des liens
   du menu l'ecrasait : brun sur brun).                                    */
@media (max-width: 61.99rem) {
  .menu-dep > a { display: block; padding-right: 3rem; }
  .menu-fl { top: .3rem; }
  .menu > .btn, .menu > .btn:hover { color: var(--panneau); border-bottom: 0; justify-content: center; }
}