/* ═══════════════════════════════════════════════════════════════════
   Cap Déco — feuille de style partagée par toutes les pages
   Charte Japandi : crème, or bois, sauge, serif Fraunces.

   Ordre du fichier
     1. Jetons (couleurs, rayons, espacements, polices)
     2. Polices auto-hébergées
     3. Base et typographie
     4. Mise en page : sections, en-têtes de page, fil d'Ariane
     5. Composants : boutons, surfaces et cartes, chiffres clés, étapes,
        FAQ, listes, galerie, frise, zones d'intervention, formulaire, logos,
        contact, pages légales
     6. Navigation, pied de page, bouton WhatsApp
     7. Galerie photo plein écran
     8. Apparition au défilement, accessibilité
     9. Points de rupture : 1000 (tablette), 880 (navigation), 820 (mobile)
   Les styles propres à l'accueil sont dans home.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Jetons ───────────────────────────────────────────────────── */
:root{
  /* Fonds et textes */
  --bg:#EFEAE0;--surface:#F7F4ED;--card:#FFFFFF;
  --fg:#1A1A1A;--fg-muted:#4A4A4A;
  /* .62 et pas moins : en dessous, les textes gris (placeholders, fil
     d'Ariane) tombent sous le rapport de contraste 4,5:1 exigé par le RGAA. */
  --fg-dim:rgba(26,26,26,.62);

  /* Rouge de la marque. Le fichier du logo est en #FE0000, mais ce rouge
     vif ne paraît juste que dans les traits fins des lettres : en aplat
     (boutons, bulle WhatsApp) il devient criard. #D00000 rend le rouge
     que l'œil lit dans le logo, et tient 4,8:1 sur le fond crème : une
     seule valeur sert donc aux surfaces, aux traits et au texte.
     --rouge-texte reste un jeton à part : si l'on éclaircit --rouge, le
     texte doit garder #D00000 ou plus sombre pour rester lisible. */
  --rouge:#D00000;
  --rouge-texte:var(--rouge);
  --rouge-fonce:#A80000;              /* survol des textes rouges et boutons pleins */
  --rouge-doux:rgba(208,0,0,.07);
  --rouge-filet:rgba(208,0,0,.30);

  /* Sauge des étiquettes en capitales : 4,8:1 sur le fond. */
  --sage:#5E6A58;

  --ok:#3F6B47;--err:#A33A32;
  --line:#D9D2C5;--line-strong:rgba(26,26,26,.16);

  /* Rayons */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:18px;

  /* Espacements. --sec-y est borné : en vh seul, il gonflait sur les
     grands écrans et s'écrasait sur les petits. */
  --sec-y:clamp(56px,9vh,104px);
  /* Marge latérale plafonnée : en vw seul, elle grandissait avec l'écran
     dans des conteneurs de 1180 px, et la colonne de texte rétrécissait sur
     les grands écrans (boutons de l'en-tête métier empilés dès 1600 px). */
  --sec-x:clamp(20px,6vw,72px);
  --crumb-h:130px;                    /* hauteur du fil d'Ariane, navigation comprise (112 + une ligne) */
  --intro-gap:34px;                   /* entre l'introduction d'une section et sa grille */

  /* Polices */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ─── 2. Polices auto-hébergées ───────────────────────────────────────
   Trois familles à axes variables, sous-ensemble latin (couvre le
   français, « œ » et « € » compris), servies depuis /assets/polices/.
   Plus aucune requête vers Google au chargement : l'adresse IP du visiteur
   ne quitte pas le site. Licence SIL OFL 1.1 (voir polices/LICENCES.txt).
   Les fichiers viennent de Google Fonts (mêmes tracés que la version
   distante qu'ils remplacent). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 400;font-display:swap;
  src:url(/assets/polices/fraunces-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/assets/polices/inter-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/assets/polices/jetbrains-mono-latin.woff2) format('woff2')}

/* ─── 3. Base et typographie ──────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:rgba(208,0,0,.16)}
/* height:auto est indispensable : sans lui, l'attribut height="…" du HTML
   fait loi et l'image s'étire (le ratio CSS n'est alors plus appliqué). */
img{max-width:100%;height:auto}
/* Les scripts masquent des éléments par l'attribut hidden : cette règle
   doit l'emporter sur tout display posé par une classe. */
[hidden]{display:none!important}
/* Une section atteinte par une ancre ne doit pas passer sous la barre de
   navigation fixe : on lui réserve sa hauteur. */
[id]{scroll-margin-top:96px}

.dt{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.mono{font-family:var(--mono);letter-spacing:.22em;font-size:11px;text-transform:uppercase;color:var(--sage);margin:0}
.lead{font-size:clamp(16px,1.35vw,20px);line-height:1.75;color:var(--fg-muted);margin:0}
.accent{color:var(--rouge-texte)}

.ptitle{font-size:clamp(38px,5.4vw,76px);margin:14px 0 22px;color:var(--fg)}
.ptitle-s{font-size:clamp(32px,4.4vw,58px)}
.stitle{font-size:clamp(27px,3.3vw,46px);margin:14px 0 26px;color:var(--fg);max-width:20ch}

.prose{max-width:68ch}
.prose p{color:var(--fg-muted);margin:0 0 18px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:500;color:var(--fg)}
.prose a,.ans a{color:var(--rouge-texte)}

/* Texte de lecture : justifié, avec césure. La césure (dictionnaire
   français, grâce à lang="fr" sur <html>) évite les rivières que le
   justifié seul creusait dans les colonnes étroites ; hyphenate-limit-chars
   interdit de couper un mot de moins de 7 lettres. Dans un bloc centré
   (en-tête large, encadré d'appel), la dernière ligne reste centrée.
   Les cartes (.card) et les étapes (.step), en colonnes de 250 à 300 px,
   restent fer à gauche : justifiées, elles creusaient de larges blancs
   entre les mots. */
.lead,.prose p,.bloc p,.bloc li,.tlist li,.faq .ans p,.frise-etape p,.legal p,.legal li,.quote{text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3}
.phead-large .lead,.cta .lead{text-align-last:center}

/* L'introduction d'une section est suivie d'un écart fixe, quel que soit
   ce qui vient après (grille de cartes, liste, boutons). Une section qui
   se termine par son texte n'a pas de suivant, donc pas d'écart.
   Préfixé par .sec pour l'emporter sur les composants qui remettent leurs
   marges à zéro : la liste .tlist, déclarée plus bas, collait sinon au
   paragraphe (Environnement et pages métiers). */
.sec .prose+*{margin-top:var(--intro-gap)}

/* ─── 4. Mise en page ─────────────────────────────────────────────── */
.sec{max-width:1180px;margin:0 auto;padding:var(--sec-y) var(--sec-x);position:relative}
.sec+.sec{padding-top:0}
/* La première section après un en-tête de page en est rapprochée. */
.hero+.sec,.phead-large+.sec{padding-top:clamp(40px,7vh,80px)}
.crumb+.sec{padding-top:clamp(32px,5vh,56px)}
/* Boutons qui concluent une section, sous une grille. */
.sec>.btns{margin-top:34px}

/* En-tête de page : texte à gauche, photo à droite (pages métiers). */
.phead{max-width:1180px;margin:0 auto;padding:5vh var(--sec-x) 0;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
/* L'en-tête remplit le premier écran sous le fil d'Ariane (--crumb-h), son
   contenu centré en hauteur : la section suivante commence sous la ligne
   de flottaison, quelle que soit la hauteur de l'écran, au lieu d'en
   laisser dépasser l'étiquette. Si le contenu est plus haut que l'écran,
   rien ne change. La page Contact en est dispensée (.phead-court) : son
   formulaire doit rester visible dès l'arrivée. */
.crumb+.phead{min-height:calc(100vh - var(--crumb-h));min-height:calc(100svh - var(--crumb-h));padding-bottom:9vh}
.crumb+.phead-court{min-height:0;padding-bottom:0}
.phead .btns{margin-top:32px}
.pshot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-xl);background:var(--surface);display:block}
.pmeta{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.pmeta li{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge-texte);border:1px solid var(--rouge-filet);border-radius:999px;padding:7px 14px}
/* En-tête sans photo, centré (Réalisations, Méthode, À propos, Contact…). */
.phead-large{grid-template-columns:1fr;max-width:900px;margin-left:auto;margin-right:auto;text-align:center}
.phead-large .lead{margin-left:auto;margin-right:auto;max-width:68ch}
.phead-large .btns{justify-content:center}

/* Fil d'Ariane, sous la barre de navigation fixe. */
.crumb{max-width:1180px;margin:0 auto;padding:112px var(--sec-x) 0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.crumb li+li::before{content:"/";margin-right:10px;color:var(--line-strong)}
.crumb a{color:var(--fg-muted);text-decoration:none}
.crumb a:hover{color:var(--rouge-texte)}

/* ─── 5. Composants ───────────────────────────────────────────────── */

/* Boutons */
.cbtn{display:inline-flex;align-items:center;gap:10px;padding:17px 32px;border-radius:999px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s,border-color .3s;border:1px solid}
.cbtn.solid{background:var(--rouge);color:#fff;border-color:var(--rouge)}
.cbtn.solid:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce)}
.cbtn.line{border-color:var(--fg);color:var(--fg);background:transparent}
.cbtn.line:hover{background:var(--fg);color:var(--bg)}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* Surfaces : la base commune de toutes les cartes du site. Même fond,
   même filet, même rayon ; chaque composant n'ajoute ensuite que ce qui
   lui est propre (rembourrage, photo, filet doré…). .surface seule sert
   aux encadrés génériques : témoignages, encadré d'appel, formulaire. */
.surface,.card,.bloc,.projet,.kpi,.ctbloc,.croute,.zone{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.surface{padding:32px 38px;border-radius:var(--r-xl)}
/* Seules les cartes cliquables se soulèvent au survol : une carte qui
   bouge promet un lien. Les autres restent en place. */
a.card,.projet,.croute{transition:border-color .35s,transform .35s}
a.card:hover,.projet:hover,.croute:hover{border-color:var(--rouge);transform:translateY(-3px)}

/* Encadré d'appel en fin de page : titre, phrase, boutons, le tout centré. */
.cta{text-align:center}
.cta .stitle{max-width:none;margin-top:0}
.cta .lead{margin:0 auto 28px;max-width:60ch}
.cta .btns{justify-content:center}

/* Cartes de prestations, avec ou sans photo. La photo va d'un bord à
   l'autre : le rembourrage passe de la carte au bloc de texte, et
   overflow:hidden coupe ses angles carrés au rayon de la carte. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:28px 26px 30px}
a.card{display:block;text-decoration:none;color:inherit}
.card.ill{padding:0;overflow:hidden;display:flex;flex-direction:column}
.cimg{width:100%;height:190px;object-fit:cover;display:block;background:var(--bg);transition:opacity .3s}
a.card.ill:hover .cimg{opacity:.92}
/* flex:1 pour que le bloc de texte remplisse la carte : les descriptions
   font une ou deux lignes, et « En savoir plus » doit rester à la même
   hauteur dans toutes les cartes d'une rangée. */
.cardin{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--serif);font-weight:300;font-size:22px;letter-spacing:-.02em;line-height:1.2;margin:0 0 10px;color:var(--fg)}
.card p{font-size:13.5px;line-height:1.65;color:var(--fg-muted);margin:0}
.cidx{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--rouge-texte);margin-bottom:14px}
/* « En savoir plus » des cartes-liens : plaqué en bas, révélé au survol
   (toujours visible sur les écrans sans survol). margin-top:auto absorbe
   une marge fixe, d'où le padding-top pour l'écart minimum. */
.card-more{display:block;margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge-texte);opacity:0;transform:translateY(-3px);transition:opacity .3s,transform .3s}
a.card:hover .card-more,a.card:focus-visible .card-more{opacity:1;transform:none}
@media (hover:none){.card-more{opacity:1;transform:none}}

/* Blocs à filet doré : contraintes locales, équipes, déchets, livrables. */
.blocs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bloc{border-left:2px solid var(--rouge);border-radius:4px var(--r-lg) var(--r-lg) 4px;padding:26px 28px}
.bloc h3{font-family:var(--serif);font-weight:300;font-size:21px;letter-spacing:-.02em;margin:0 0 8px;color:var(--fg)}
.bloc-meta{display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge-texte)}
.bloc p{font-size:13.5px;line-height:1.7;color:var(--fg-muted);margin:0}
.bloc ul{margin:10px 0 0;padding-left:18px}
.bloc li{font-size:13.5px;line-height:1.65;color:var(--fg-muted);margin-bottom:6px}

/* Chiffres clés. Une seule famille pour l'accueil (compteur animé par
   home.js) et les pages intérieures. */
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{text-align:center;padding:26px 16px}
.knum{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.7vw,54px);letter-spacing:-.02em;line-height:1;color:var(--rouge-texte)}
.klab{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}

/* Vignettes de chantier. Sur Réalisations, un <article> : le bouton
   (photo + texte) ouvre la galerie, les étiquettes de métiers sous lui
   sont des liens. Sur l'accueil, un simple lien vers un secteur. */
.projets{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.projet{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit}
.projet-ouvrir{display:block;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.projet-ouvrir:focus-visible{outline-offset:-3px}
.projet-img{width:100%;height:210px;object-fit:cover;display:block;background:var(--surface);transition:opacity .3s}
.projet:hover .projet-img{opacity:.92}
.projet-txt{display:block;padding:18px 20px 18px}
.projet-nom{display:block;font-family:var(--serif);font-weight:300;font-size:20px;letter-spacing:-.02em;color:var(--fg)}
.projet-corps{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--fg-muted)}
.projet-meta{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
/* Étiquettes de métier sous une vignette : des liens texte vers les pages
   métiers, séparés par un point. Volontairement sans pastille, pour ne pas
   ressembler à des boutons. */
.projet-tags{display:block;padding:0 20px 18px;margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.9}
.projet-tags a{white-space:nowrap;color:var(--rouge-texte);text-decoration:underline;text-decoration-color:var(--rouge-filet);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.projet-tags a:hover{color:var(--rouge-fonce);text-decoration-color:var(--rouge)}
/* Le point séparateur reste en fin de ligne quand la liste se replie. */
.projet-tags a:not(:last-child)::after{content:"·";color:var(--fg-dim);padding:0 8px;display:inline-block}

/* Filtres de la page Réalisations : deux listes déroulantes (secteur,
   métier), l'étiquette à gauche de chaque liste ; filtres.js ajoute à
   chaque choix son nombre de chantiers.
   La vraie liste est invisible et couvre sa boîte .filtre-boite, qui
   affiche le choix en cours (texte recopié par filtres.js) : la boîte peut
   ainsi être petite, alors que la liste garde 16 px — en dessous, Safari
   sur iPhone zoome dans la page quand on l'ouvre. Toucher la boîte ouvre
   la liste native du téléphone.
   Sans JavaScript, les listes ne servent à rien : on les masque, toute la
   grille reste affichée. */
.filtres{margin-bottom:26px}
.filtre-selects{display:flex;flex-wrap:wrap;gap:12px 32px}
.filtre-choix{display:flex;align-items:center;gap:14px;flex:0 1 380px;min-width:0}
.filtre-lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);flex:0 0 auto}
.filtre-boite{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:12px 44px 12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d1d1f' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;font-size:14px;color:var(--fg);cursor:pointer;transition:border-color .25s}
.filtre-boite:hover,.filtre-boite:focus-within{border-color:var(--rouge)}
.filtre-boite:has(.filtre-select:focus-visible){outline:2px solid var(--rouge-texte);outline-offset:3px}
.filtre-valeur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filtre-select{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;opacity:0;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none}
@media (scripting:none){.filtres{display:none}}
.filtre-barre{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:16px;min-height:18px}
.filtre-etat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin:0}
.filtre-raz{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge-texte);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--rouge-filet);text-underline-offset:4px}
.filtre-raz::before{content:"×";margin-right:6px;text-decoration:none;display:inline-block}
.filtre-raz:hover{color:var(--rouge-fonce);text-decoration-color:var(--rouge)}
.filtre-intro{max-width:68ch;color:var(--fg-muted);margin:10px 0 0}

/* Étapes numérotées */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.step{border-top:1px solid var(--line);padding-top:20px}
.step::before{counter-increment:st;content:"0" counter(st);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--rouge-texte);margin-bottom:12px}
.step h3{font-family:var(--serif);font-weight:300;font-size:20px;letter-spacing:-.02em;margin:0 0 8px;color:var(--fg)}
.step p{font-size:13px;line-height:1.6;color:var(--fg-muted);margin:0}

/* Questions fréquentes */
.faq{max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  cursor:pointer;list-style:none;padding:22px 0;
  font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.7vw,24px);letter-spacing:-.02em;line-height:1.3;color:var(--fg);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:22px;color:var(--rouge-texte);flex:0 0 auto;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--rouge-texte)}
.faq .ans{padding:0 0 24px;max-width:62ch}
.faq .ans p{font-size:14px;line-height:1.75;color:var(--fg-muted);margin:0 0 14px}
.faq .ans p:last-child{margin-bottom:0}

/* Liste technique à puces rouges, sur deux colonnes */
.tlist{list-style:none;margin:0;padding:0;columns:2;column-gap:44px}
.tlist li{position:relative;padding:0 0 14px 24px;font-size:14px;line-height:1.6;color:var(--fg-muted);break-inside:avoid}
.tlist li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--rouge)}
.tlist strong{font-weight:500;color:var(--fg)}

/* Galerie de quatre photos des pages métiers */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal figure{margin:0}
.gal img{width:100%;height:200px;object-fit:cover;border-radius:var(--r-md);display:block;background:var(--surface)}
.gal figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:11px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.gal figcaption span:last-child{color:var(--rouge-texte);text-align:right}

/* Frise chronologique (histoire de l'entreprise, phases de la méthode) */
.frise{border-left:1px solid var(--line);padding-left:28px;margin-left:6px}
.frise-etape{position:relative;padding-bottom:30px}
.frise-etape::before{content:"";position:absolute;left:-34px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 4px var(--bg)}
.frise-etape:last-child{padding-bottom:0}
.frise-date{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--rouge-texte);margin-bottom:6px}
.frise-etape h3{font-family:var(--serif);font-weight:300;font-size:20px;letter-spacing:-.02em;margin:0 0 8px;color:var(--fg)}
.frise-etape p{font-size:14px;line-height:1.7;color:var(--fg-muted);margin:0;max-width:64ch}
.frise-etape p+p{margin-top:13px}

/* Zone d'intervention (À propos) : la Guadeloupe, siège de l'entreprise,
   en grande carte sur deux rangées, les quatre autres territoires en
   petites cartes à sa droite. Les silhouettes (Images/zones/) portent leur
   couleur dans le fichier : le rouge de la marque pour toutes.
   object-fit:contain garde chaque territoire entier dans une hauteur
   commune, quelles que soient ses proportions. Le texte de la grande carte
   descend en bas, à la hauteur de celui de la seconde rangée. */
.zones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px}
.zone{display:flex;flex-direction:column;padding:26px 26px 24px}
.zone-siege{grid-row:span 2}
.zone-carte{display:block;width:100%;height:130px;object-fit:contain;margin-bottom:22px}
.zone-siege .zone-carte{height:300px}
.zone-txt{margin-top:auto}
.zone-code{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rouge-texte);margin-bottom:8px}
.zone h3{font-family:var(--serif);font-weight:300;font-size:21px;letter-spacing:-.02em;line-height:1.2;margin:0;color:var(--fg)}
.zone p{font-size:13.5px;line-height:1.65;color:var(--fg-muted);margin:10px 0 0;max-width:46ch}

/* Formulaire de devis */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.form .full{grid-column:1/-1}
/* Chaque champ est enveloppé avec son intitulé, pour que celui-ci reste
   lisible une fois la saisie commencée (un placeholder, lui, disparaît). */
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}
/* Astérisque des champs obligatoires, dans les intitulés comme dans la
   mention explicative sous le formulaire. */
.req{color:var(--rouge-texte);margin-left:3px}
.fin{padding:15px 18px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-family:var(--sans);font-size:14px;color:var(--fg);outline:none;width:100%;transition:border-color .25s}
.fin:focus{border-color:var(--rouge)}
.fin::placeholder{color:var(--fg-dim)}
/* Champ invisible qui piège les robots : ils remplissent tout ce qu'ils
   trouvent, un visiteur ne le voit jamais. Ni display:none ni visibility,
   que certains robots savent détecter. */
.hpot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
textarea.fin{resize:vertical;min-height:110px}
select.fin{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d1d1f' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
.fsub{padding:18px 32px;border-radius:999px;border:1px solid var(--rouge);background:var(--rouge);color:#fff;font-family:var(--sans);font-size:14px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .3s,border-color .3s}
.fsub:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce)}
.fsub:disabled{opacity:.6;cursor:progress}
/* Réponse du serveur après envoi, affichée sous le bouton. */
.fstatus{grid-column:1/-1;margin:0;padding:0;font-size:14px;line-height:1.6;outline:none}
.fstatus:empty{display:none}
.fstatus.pending{color:var(--fg-muted)}
.fstatus.ok,.fstatus.err{padding:15px 18px;border-radius:10px;border:1px solid}
.fstatus.ok{color:var(--ok);border-color:var(--ok);background:rgba(63,107,71,.07)}
.fstatus.err{color:var(--err);border-color:var(--err);background:rgba(163,58,50,.06)}
/* Mention RGPD sous le formulaire. */
.fnote2{grid-column:1/-1;margin:2px 0 0;font-size:12px;line-height:1.6;color:var(--fg-muted)}
.fnote2 a{color:var(--rouge-texte)}

/* Logos clients : boîte de taille fixe et équilibrage optique. Partagé
   entre le bandeau défilant de l'accueil et la grille de Réalisations. */
.lbox{flex:0 0 auto;width:200px;height:94px;margin-right:16px;display:flex;align-items:center;justify-content:center;padding:6px 12px}
/* --h : hauteur d'affichage de chaque logo, calculée par
   outils/optimise-images.py --echelle-logos pour que tous occupent la même
   surface visible (les fichiers sont rognés au ras du dessin). Les points
   de rupture appliquent un facteur à --h, jamais une autre valeur. */
.lbox img{--h:48px;width:auto;height:auto;max-width:100%;max-height:var(--h);object-fit:contain}
/* ↓ Hauteurs des logos clients, écrites par outils/optimise-images.py --echelle-logos : ne pas modifier à la main. */
.lbox img[src$="Club_Med_Logo_Blu.webp"]{--h:27px}
.lbox img[src$="Logo-Auchan.webp"]{--h:32px}
.lbox img[src$="Logo-EDF.webp"]{--h:58px}
.lbox img[src$="Corsair-web.webp"]{--h:54px}
.lbox img[src$="Logo-WAB-Assurances.webp"]{--h:50px}
.lbox img[src$="Sixt_Logo_2023.svg.webp"]{--h:44px}
.lbox img[src$="Cinestar-web.webp"]{--h:67px}
.lbox img[src$="RSMA.webp"]{--h:67px}
.lbox img[src$="universite-des-antilles.webp"]{--h:78px}
.lbox img[src$="Logo-SOPSAG.webp"]{--h:38px}
.lbox img[src$="logo-destreland.webp"]{--h:67px}
.lbox img[src$="Logo-Casino-Gosier.webp"]{--h:50px}
.lbox img[src$="Toubana.webp"]{--h:77px}
.lbox img[src$="Getelec.webp"]{--h:78px}
.lbox img[src$="Logo-BTB.webp"]{--h:71px}
/* ↑ Fin des hauteurs des logos clients. */
/* Mur de logos de la page Réalisations : les logos posés sur le fond, sans
   cadre, dans des cases de même taille, avec les mêmes hauteurs --h que le
   bandeau de l'accueil. En flex plutôt qu'en grille : une dernière rangée
   incomplète reste centrée au lieu de s'aligner à gauche. */
.logos-grille{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,3.4vw,44px) clamp(24px,3.6vw,48px)}
.logos-grille .lbox{width:164px;height:84px;margin:0;padding:0}

/* Page Contact : formulaire à gauche, coordonnées à droite. La colonne
   de droite reste visible pendant qu'on remplit le formulaire. */
.ctgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,2.6vw,36px);align-items:start}
.ctform{padding:clamp(24px,2.6vw,40px)}
.ctform .stitle{margin-top:0;max-width:none}
.ctform .lead{margin-bottom:4px}
.ctside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.ctbloc{padding:26px 28px;border-radius:var(--r-xl)}
.ctbloc h2{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin:0 0 14px}
.ctbloc .btns{margin-top:18px}
.ctmain{display:inline-block;font-family:var(--mono);font-size:21px;letter-spacing:.06em;color:var(--rouge-texte);text-decoration:none}
.ctmain:hover{color:var(--rouge-fonce)}
.ctadr{font-style:normal;font-size:14px;line-height:1.7;color:var(--fg-muted);margin:0 0 12px}
.ctnote{font-size:13px;line-height:1.7;color:var(--fg-muted);margin:10px 0 0}
.ctnote:first-of-type{margin-top:8px}
.ctnote a{color:var(--rouge-texte)}

/* Page de confirmation rendue par contact.php (envoi sans JavaScript) :
   une colonne étroite, pas de barre de navigation. */
.sec-message{max-width:680px;padding-top:clamp(64px,10vh,110px)}
.sec-message .btns{margin-top:26px}

/* Pages légales : colonne de lecture étroite, listes de définitions sur
   deux colonnes. */
.legal{max-width:78ch}
.legal h2{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,31px);letter-spacing:-.02em;margin:44px 0 14px;color:var(--fg)}
.legal h3{font-family:var(--serif);font-weight:300;font-size:19px;margin:26px 0 8px;color:var(--fg)}
.legal p,.legal li{color:var(--fg-muted);margin:0 0 14px;line-height:1.75}
.legal ul{padding-left:20px}
.legal li{margin-bottom:8px}
.legal a{color:var(--rouge-texte)}
.legal small{font-size:13px}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0 0 18px}
.legal dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);padding-top:4px}
.legal dd{margin:0;color:var(--fg-muted)}
.legal-maj{margin-top:34px;font-size:13px}
.legal+.btns{margin-top:44px}

/* ─── 6. Navigation, pied de page, WhatsApp ───────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:center;padding:22px 4vw;
  background:linear-gradient(rgba(239,234,224,.99),rgba(239,234,224,.9));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.nlinks{display:flex;align-items:center;gap:28px}
.nlink{color:var(--fg-muted);text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.04em;transition:color .3s}
.nlink:hover{color:var(--fg)}
.nlink[aria-current="page"]{color:var(--rouge-texte)}
.navlogo{position:absolute;left:4vw;top:50%;transform:translateY(-50%);display:flex;align-items:center}
/* capdeco-barre.svg : le logo sans la ligne « conseil, agencement,
   peinture », illisible à cette taille (la marque complète reste celle
   du hero). 28 px de haut = le nom un peu plus grand qu'avant. */
.navlogo img{height:28px;width:auto;display:block}
.navtel{
  position:absolute;right:4vw;top:50%;transform:translateY(-50%);
  color:var(--rouge-texte);font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-weight:500;
  text-decoration:none;white-space:nowrap;
}
.navtel:hover{color:var(--rouge-fonce)}

/* Sous-menu « Métiers », ouvert au survol ou au focus clavier. */
.ndrop{position:relative;display:flex;align-items:center}
.ndrop>.nlink{display:inline-flex;align-items:center}
/* chevron qui pivote à l'ouverture */
.ndrop>.nlink::after{
  content:"";width:5px;height:5px;margin-left:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .28s;
}
.ndrop:hover>.nlink::after,.ndrop:focus-within>.nlink::after{transform:translateY(1px) rotate(225deg)}
.nmenu{
  position:absolute;top:calc(100% + 14px);left:50%;
  display:flex;flex-direction:column;gap:1px;min-width:238px;padding:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 14px 34px rgba(26,26,26,.12);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-6px);
  transition:opacity .28s,transform .28s,visibility .28s;
}
/* passerelle invisible : évite que le menu se ferme en traversant le vide */
.nmenu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.ndrop:hover .nmenu,.ndrop:focus-within .nmenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nmenu a{
  font-size:13px;line-height:1.35;color:var(--fg-muted);text-decoration:none;
  padding:10px 14px;border-radius:var(--r-sm);transition:background .2s,color .2s;
}
.nmenu a:hover{background:var(--rouge-doux);color:var(--rouge-texte)}
.nmenu a[aria-current="page"]{color:var(--rouge-texte);font-weight:500}

/* Menu latéral mobile (affiché sous 1080 px, voir les points de rupture) */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0}
.burger span{display:block;width:24px;height:2px;background:var(--fg);border-radius:2px;transition:transform .3s ease,opacity .3s ease,background .25s ease}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--rouge)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--rouge)}
.drawer-scrim{position:fixed;inset:0;background:rgba(26,26,26,.42);z-index:59;opacity:0;pointer-events:none;transition:opacity .35s ease}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;height:100%;width:min(80vw,300px);background:var(--surface);z-index:60;transform:translateX(-105%);transition:transform .38s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:66px 26px 26px;box-shadow:8px 0 30px rgba(0,0,0,.12);overflow-y:auto}
.drawer.open{transform:translateX(0)}
.drawer-x{position:absolute;top:18px;right:20px;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:2px;background:none;color:var(--fg);font-size:15px;cursor:pointer;display:grid;place-items:center}
.drawer-x:hover{border-color:var(--rouge);color:var(--rouge-texte)}
.drawer-nav{display:flex;flex-direction:column}
.drawer-nav a{font-family:var(--serif);font-weight:300;font-size:25px;color:var(--fg);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line);letter-spacing:-.01em}
.drawer-nav a:hover{color:var(--rouge-texte)}
.drawer-sub{display:flex;flex-direction:column;padding:6px 0 12px;border-bottom:1px solid var(--line)}
.drawer-sub a{
  font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:0;
  color:var(--fg-muted);padding:9px 0 9px 16px;border-bottom:0;
}
.drawer-sub a:hover{color:var(--rouge-texte)}
.drawer-sub a[aria-current="page"]{color:var(--rouge-texte);font-weight:500}
.drawer-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:20px}
.drawer-foot a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--rouge-texte);text-decoration:none;text-transform:uppercase}

/* Pied de page */
.foot{border-top:1px solid var(--line);margin-top:var(--sec-y);padding:44px var(--sec-x)}
.footin{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin:0 0 16px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot a{color:var(--fg-muted);text-decoration:none;font-size:13.5px}
.foot a:hover{color:var(--rouge-texte)}
.foot-tel{font-family:var(--mono);font-size:15px;letter-spacing:.1em;color:var(--rouge-texte)!important;text-decoration:none;display:inline-block;margin-bottom:10px}
/* La cohérence entre le nom, l'adresse et le téléphone affichés ici et
   ceux de la fiche Google pèse en référencement local. <address> hérite
   de l'italique par défaut, on le neutralise. */
.foot-adr{font-style:normal;font-size:13px;line-height:1.6;color:var(--fg-muted);margin:0 0 12px}
/* Ligne légale tout en capitales : en casse mixte, les chiffres du SIRET
   et les sigles (hauteur de capitale) paraissaient plus gros que le texte
   en minuscules autour. Le SIRET, le RCS et le copyright ne se coupent
   pas en fin de ligne (Pointe-à-Pitre se cassait au trait d'union). */
.fnote{display:block;max-width:1180px;margin:32px auto 0;padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}
.fnote>span{white-space:nowrap}

/* Bouton WhatsApp flottant */
.wafab{position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;background:var(--rouge);display:flex;align-items:center;justify-content:center;z-index:40;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s,background .2s}
.wafab:hover{transform:scale(1.1);box-shadow:0 12px 32px rgba(0,0,0,.35);background:var(--rouge-fonce)}
.wafab svg{width:32px;height:32px;fill:#fff}

/* ─── 7. Galerie photo plein écran ────────────────────────────────── */
.lb{position:fixed;inset:0;background:rgba(239,234,224,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:50;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:70vw;max-height:74vh;object-fit:contain;border-radius:var(--r-sm);box-shadow:0 20px 60px rgba(0,0,0,.28)}
.lbthumbs{position:absolute;right:2vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;max-height:78vh;overflow-y:auto;scrollbar-width:none;padding:4px}
.lbthumbs::-webkit-scrollbar{display:none}
.lb img.lbth{width:86px;height:60px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:.4;border:2px solid transparent;transition:opacity .2s,border-color .2s;flex:0 0 auto;box-shadow:none;max-width:none;max-height:none}
.lb img.lbth:hover{opacity:.75}
.lb img.lbth.act{opacity:1;border-color:var(--rouge)}
.lbcap{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);display:flex;gap:22px;font-family:var(--mono);font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap}
.lbbtn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(239,234,224,.72);color:var(--fg);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s}
.lbbtn:hover{background:var(--rouge-doux)}
.lbprev{left:3vw}
.lbnext{right:calc(4vw + 96px)}
.lb.solo .lbnext{right:3vw}
.lb.solo img{max-width:86vw}
/* display:grid + padding:0 : sans cela le glyphe ✕ se cale sur le
   remplissage par défaut du bouton et sort du cercle. */
.lbx{position:absolute;top:24px;right:24px;width:46px;height:46px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);background:rgba(239,234,224,.72);color:var(--fg);font-size:18px;line-height:1;cursor:pointer;transition:background .25s}
.lbx:hover{background:var(--rouge-doux)}

/* ─── 8. Apparition au défilement, accessibilité ──────────────────── */
/* Un élément .rev monte de quelques pixels en apparaissant. Sans
   JavaScript, la classe .reveal-on n'est jamais posée sur <body> et tout
   le contenu s'affiche normalement. Chaque élément n'apparaît qu'une fois
   (site.js cesse de l'observer). */
.rev{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal-on .rev{opacity:0;transform:translateY(24px)}
.reveal-on .rev.on{opacity:1;transform:none}
/* Les cartes cliquables ont leur propre transition de survol (section 4).
   Plus spécifique que .rev, elle remplaçait le fondu : la carte surgissait
   d'un coup, 24 px trop bas, puis glissait. On réunit les deux, sans le
   raccourci « transition », qui effacerait les délais de la règle suivante. */
.reveal-on :is(a.card,.projet,.croute).rev{transition-property:opacity,transform,border-color;transition-duration:.6s,.6s,.35s;transition-timing-function:var(--ease),var(--ease),ease}
/* Les cartes d'une même rangée partent l'une après l'autre. */
:is(.cards,.projets,.tgrid,.ctgrid)>:nth-child(3n+2){transition-delay:.07s}
:is(.cards,.projets,.tgrid,.ctgrid)>:nth-child(3n+3){transition-delay:.14s}

/* Lien d'évitement : premier élément atteint par la tabulation, il permet
   de sauter la navigation pour aller droit au contenu. */
.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--rouge);color:#fff;padding:14px 22px;font-size:13px;text-decoration:none;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
/* Un liseré visible sur tout élément atteint au clavier. :focus-visible
   ne se déclenche pas à la souris : l'apparence au clic est inchangée. */
:focus-visible{outline:2px solid var(--rouge-texte);outline-offset:3px;border-radius:2px}
.fin:focus-visible{outline-offset:1px}

/* ─── 9. Points de rupture ────────────────────────────────────────── */

/* 880 : la barre passe au menu latéral. Avec cinq entrées (les pages de
   l'entreprise sont regroupées dans un menu déroulant), le bloc central
   tient jusque-là entre le logo et le numéro, positionnés en absolu ; en
   dessous, ils se chevaucheraient. Le logo est alors centré entre le
   bouton menu et le numéro. Sous 820 px il ne tient plus au centre (il
   touchait le numéro) : il rejoint la gauche, à côté du bouton, et le
   préfixe « Tél. » du numéro disparaît. */
@media (max-width:880px){
  .nlinks{display:none}
  .burger{display:flex;position:absolute;left:5vw;top:50%;transform:translateY(-50%)}
  .navlogo{left:50%;right:auto;transform:translate(-50%,-50%)}
  .navlogo img{height:25px}
}

/* 1100 : petit portable. L'en-tête métier donne un peu plus de place au
   texte, pour que ses deux boutons tiennent sur une ligne.

   La borne basse (1001) n'est pas décorative : `.phead:not(.phead-large)`
   pèse plus lourd que le `.phead` du bloc 1000 px qui repasse l'en-tête sur
   une colonne. Sans elle, les deux règles s'appliquaient ensemble jusqu'au
   plus petit écran et c'est la plus spécifique qui gagnait : sur téléphone,
   le texte des pages métiers restait coincé dans une colonne de 200 px, à
   côté d'une photo timbre-poste. */
@media (min-width:1001px) and (max-width:1100px){
  .phead:not(.phead-large){grid-template-columns:1.2fr .8fr}
}

/* 1000 : tablette. Les grilles gardent le nombre de colonnes du bureau —
   c'est la composition de référence du site, elle ne change pas avec la
   largeur de l'écran. On ne resserre ici que les gouttières. */
@media (max-width:1000px){
  .cards,.gal,.projets{gap:14px}
  .steps{gap:22px 14px}
  .kgrid{gap:12px}
  .blocs{gap:14px}
  .zones{gap:14px}
  .zone{padding:22px 20px 20px}
  .zone h3{font-size:19px}
  .phead{gap:24px}
  .ctgrid{gap:18px}
  /* La colonne latérale du formulaire cesse de suivre le défilement :
     trop haute pour rester collée sur un écran court. */
  .ctside{position:static}
}

/* 820 : mobile. Plancher de lecture : 11 px pour les étiquettes, 12 px et
   plus pour tout ce qui porte une information, 14 px pour le texte courant
   (en dessous, Google signale une page « illisible sur mobile »). La
   composition du bureau est gardée là où ces tailles tiennent : cartes
   métiers de l'accueil (des portes, le titre seul) sur trois colonnes,
   méthode en cinq étapes de front. Les grilles qui portent du texte
   passent à deux colonnes ; témoignages, blocs et listes à une seule.
   Dans une grille à deux colonnes, un dernier élément seul prend toute la
   largeur. */
@media (max-width:820px){
  :root{
    --sec-x:15px;              /* retrait des sections, ex-clamp(20px,6vw,72px) */
    --crumb-h:96px;
    --intro-gap:18px;
    --r-lg:12px;--r-xl:13px;   /* les grands rayons font bulle sur de petites cartes */
  }
  body{font-size:14px}
  [id]{scroll-margin-top:72px}

  /* ── Barre du haut et fil d'Ariane ──
     Hauteur fixée : le menu, le logo et le numéro sont positionnés en
     absolu, ils ne donnent aucune hauteur à la barre. Avec un simple
     retrait, la bande ne faisait que 22 px et le menu en dépassait. ── */
  .nav{height:60px;padding:0 var(--sec-x)}
  .burger{left:var(--sec-x);width:38px;height:38px}
  .burger span{width:22px}
  .navlogo{left:calc(var(--sec-x) + 50px);right:auto;transform:translateY(-50%)}
  .navlogo img{height:22px}
  .navtel{right:var(--sec-x);font-size:13px;letter-spacing:.04em}
  .navtel-pre{display:none}
  .crumb{padding:78px var(--sec-x) 0;font-size:11px;letter-spacing:.08em}
  .crumb ol{gap:6px}
  .crumb li+li::before{margin-right:6px}

  /* ── Sections, titres, texte courant ──
     Deux sections qui se suivent : 54 px de retrait bas pour la première,
     26 de retrait haut pour la seconde, soit 80 px pour marquer le
     changement de sujet sur un écran où rien d'autre ne sépare les blocs. */
  .sec{padding:54px var(--sec-x)}
  .sec+.sec{padding-top:26px}
  .mono{font-size:11px;letter-spacing:.16em}
  .stitle{font-size:23px;margin:8px 0 14px}
  .ptitle{font-size:27px;margin:8px 0 12px}
  .lead{font-size:14px;line-height:1.6}
  .prose p{font-size:14px;line-height:1.65}
  .surface{padding:16px;border-radius:12px}
  .sec>.btns{margin-top:22px}
  .btns{gap:10px}

  /* ── Boutons : resserrés, 26 px de haut. Plus gros, les boutons de fin
     de section pesaient plus que leur titre. Seule exception au plancher
     de 11 px : un libellé court, en capitales, dans un cadre. ── */
  .cbtn{padding:7px 12px;font-size:10px;letter-spacing:.05em;gap:5px}

  /* Le justifié tient dans une colonne de lecture, pas dans une colonne de
     carte : à mi-largeur il creuse des rivières entre les mots. Les
     paragraphes larges (chapeaux, prose, blocs, frise) le gardent ; ceux
     des cartes et des témoignages repassent au fer à gauche. */
  .quote,.card p,.projet-corps,.step p,.croute-hint{text-align:left;-webkit-hyphens:none;hyphens:none}

  /* ── En-tête des pages métier ──
     Texte sur toute la largeur, puis la photo en grand, en paysage, sous
     les boutons. align-content:center centre le bloc entier dans l'en-tête
     plein écran (sans lui, la grille répartissait la hauteur restante
     entre ses rangées). Le :not() protège les en-têtes centrés sans photo
     (À propos, Méthode, Réalisations), qui gardent leur colonne unique. */
  .phead:not(.phead-large){grid-template-columns:1fr;gap:20px;align-content:center}
  .phead:not(.phead-large) .pshot{width:100%;aspect-ratio:16/9;border-radius:12px}
  .phead{padding-top:16px}
  /* Le retrait bas de 9vh du bureau décentrait le bloc vers le haut. */
  .crumb+.phead{padding-bottom:16px}
  .phead .ptitle{font-size:28px;line-height:1.15;text-wrap:balance}
  .phead .lead{font-size:14px;line-height:1.6}
  .phead .btns{margin-top:16px;gap:10px}
  .pmeta{margin-top:14px;gap:6px}
  .pmeta li{font-size:11px;letter-spacing:.06em;padding:5px 10px}
  .phead-large .lead{text-align-last:auto}

  /* ── Grilles à deux colonnes ── */
  .cards,.projets,.gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .cards:not(.compactes)>:last-child:nth-child(odd),
  .projets:not(.projets-secteurs)>:last-child:nth-child(odd),
  .gal>:last-child:nth-child(odd),
  .steps:not(.mini-steps)>:last-child:nth-child(odd){grid-column:1/-1}

  /* ── Cartes ── */
  .card{padding:16px 14px 18px}
  .card.ill{padding:0}
  .cimg{height:110px}
  .cardin{padding:14px 12px 15px}
  .card h3{font-size:15px;line-height:1.25;margin:0 0 7px}
  .card p{font-size:12.5px;line-height:1.5}
  .cidx{font-size:11px;letter-spacing:.14em;margin-bottom:8px}
  .card-more{font-size:11px;letter-spacing:.1em;padding-top:10px}

  /* ── Cartes métiers de l'accueil : des portes, pas du contenu ──
     Trois de front, le titre seul : la description et « En savoir plus »
     sont sur la page métier, où la carte mène. */
  .cards.compactes{grid-template-columns:repeat(3,1fr);gap:8px}
  .cards.compactes .card p,
  .cards.compactes .card-more{display:none}
  .cards.compactes .cimg{height:78px}
  .cards.compactes .cardin{padding:11px 9px 13px}
  .cards.compactes .cidx{margin-bottom:6px}
  .cards.compactes .card h3{font-size:12.5px;line-height:1.25;margin:0}

  /* ── Vignettes de chantier ── */
  .projet-img{height:112px}
  .projet-txt{padding:13px 12px 12px}
  .projet-nom{font-size:15px;line-height:1.25}
  .projet-corps{margin-top:5px;font-size:12.5px;line-height:1.45}
  .projet-meta{margin-top:6px;font-size:10px;letter-spacing:.06em}
  .projet-tags{padding:0 12px 13px;font-size:12px;letter-spacing:.03em;line-height:1.7}
  .projet-tags a:not(:last-child)::after{padding:0 5px}
  /* Secteurs de l'accueil : le nom et la ligne de clients. */
  .projets-secteurs .projet-img{height:90px}
  .projets-secteurs .projet-txt{padding:11px 12px 12px}
  .projets-secteurs .projet-nom{font-size:14px}
  .projets-secteurs .projet-corps{margin-top:4px;font-size:12px;line-height:1.4}

  /* ── Étapes : deux par ligne ── */
  .steps{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .step{padding-top:13px}
  .step::before{font-size:11px;letter-spacing:.18em;margin-bottom:8px}
  .step h3{font-size:14.5px;margin:0 0 6px}
  .step p{font-size:12.5px;line-height:1.5}

  /* ── Chiffres clés : deux par ligne (à quatre, « années d'expérience »
     ne tenait pas à 11 px) ── */
  .kgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi{padding:16px 8px}
  .knum{font-size:30px}
  .klab{font-size:11px;letter-spacing:.06em;line-height:1.35;margin-top:8px}

  /* ── Galerie : deux par ligne, légende sur deux lignes ── */
  .gal img{height:120px;border-radius:10px}
  .gal figcaption{flex-direction:column;gap:2px;margin-top:8px;font-size:11px;letter-spacing:.04em;line-height:1.4}
  .gal figcaption span:last-child{text-align:left}

  /* ── Blocs de texte et listes : une colonne ── */
  .blocs{grid-template-columns:1fr;gap:10px}
  .bloc{padding:16px 16px 17px;border-radius:3px 10px 10px 3px}
  .bloc h3{font-size:16px;margin:0 0 6px}
  .bloc-meta{font-size:11px;letter-spacing:.1em;margin-bottom:8px}
  .bloc p,.bloc li{font-size:13.5px;line-height:1.6}
  .bloc ul{margin-top:8px;padding-left:16px}
  .bloc li{margin-bottom:5px}

  /* ── Zone d'intervention : la Guadeloupe sur toute la largeur, les
     quatre autres territoires deux par deux ── */
  .zones{grid-template-columns:repeat(2,1fr);gap:10px}
  .zone{padding:16px 16px 15px}
  .zone-siege{grid-column:1/-1;grid-row:auto}
  .zone-carte{height:84px;margin-bottom:14px}
  .zone-siege .zone-carte{height:190px}
  .zone-code{letter-spacing:.14em;margin-bottom:6px}
  .zone h3{font-size:17px}
  .zone p{line-height:1.6;margin-top:6px}
  .tlist{columns:1}
  .tlist li{font-size:13.5px;line-height:1.55;padding:0 0 10px 16px}
  .tlist li::before{width:6px;height:6px;top:8px}
  .frise{padding-left:18px;margin-left:4px}
  .frise-etape{padding-bottom:20px}
  .frise-etape::before{left:-23px;width:9px;height:9px;box-shadow:0 0 0 3px var(--bg)}
  .frise-date{font-size:11px;letter-spacing:.12em;margin-bottom:5px}
  .frise-etape h3{font-size:16px;margin:0 0 6px}
  .frise-etape p{font-size:13.5px;line-height:1.6}

  /* ── Filtres de la page Réalisations : une liste par ligne, étiquettes
     alignées, boîtes resserrées (la liste invisible garde ses 16 px). ── */
  .filtre-selects{flex-direction:column;gap:6px}
  .filtre-choix{flex:none;gap:10px}
  .filtre-lab{flex:0 0 54px;font-size:10px;letter-spacing:.12em}
  .filtre-boite{padding:7px 32px 7px 11px;font-size:13px;line-height:1.3;border-radius:8px;background-position:right 12px center}
  .filtre-barre{margin-top:10px}

  /* ── Page Contact ──
     Formulaire et colonne « nous joindre » l'un sous l'autre : côte à
     côte, la colonne de droite tombait à 105 px. Les champs sont à 16 px :
     en dessous, Safari sur iPhone zoome dans la page à chaque saisie. */
  .ctgrid{grid-template-columns:1fr;gap:12px}
  .ctform{padding:18px 16px 20px}
  .form{gap:12px;margin-top:18px}
  /* Une étiquette sur deux lignes (« surface approximative ») ne décale
     plus son champ : les champs d'une même ligne s'alignent en bas. */
  .fld{gap:6px;justify-content:flex-end}
  .fld label{font-size:11px;letter-spacing:.09em}
  .fin{padding:11px 12px;font-size:16px;border-radius:8px}
  textarea.fin{min-height:110px}
  .fsub{padding:14px 20px;font-size:12px}
  .fnote2{font-size:12px;line-height:1.55}
  .ctbloc{padding:16px 15px;border-radius:12px}
  .ctbloc h2{font-size:11px;letter-spacing:.11em;margin:0 0 10px}
  .ctbloc .btns{margin-top:12px}
  .ctmain{font-size:17px;letter-spacing:.02em}
  .ctadr{font-size:13.5px;line-height:1.55;margin:0 0 9px}
  .ctnote{font-size:12.5px;line-height:1.55;margin:8px 0 0}

  /* ── Bandeau et mur de logos ── */
  .lbox{width:92px;height:44px;padding:5px 8px;margin-right:9px}
  .lbox img{max-height:calc(var(--h) * .47)}
  .logos-grille{gap:16px 13px}
  .logos-grille .lbox{width:84px;height:42px;margin:0;padding:0}
  .logos-grille .lbox img{max-height:calc(var(--h) * .5)}

  /* ── Pied de page : les trois colonnes du bureau sur une seule ligne,
     corps réduits. Le retrait bas laisse la dernière ligne au-dessus de
     la bulle WhatsApp, qui la recouvrait en fin de page. ── */
  .foot{margin-top:34px;padding:26px var(--sec-x) 78px}
  .footin{grid-template-columns:1.12fr 1fr .9fr;gap:12px}
  .footin>div{min-width:0}
  .foot h4{font-size:10px;letter-spacing:.12em;margin:0 0 9px}
  .foot li{margin-bottom:7px;line-height:1.3}
  .foot a{font-size:11px}
  .foot-tel{font-size:11px;letter-spacing:.02em;margin-bottom:6px;white-space:nowrap}
  .foot-adr{font-size:11px;line-height:1.45;margin:0 0 8px}
  .fnote{margin-top:20px;padding-top:12px;font-size:9px;letter-spacing:.04em;line-height:1.7}
  .wafab{right:12px;bottom:12px;width:46px;height:46px}
  .wafab svg{width:24px;height:24px}

  /* ── Foire aux questions et pages légales ── */
  .faq summary{font-size:15px;padding:14px 0;gap:12px}
  .faq summary::after{font-size:18px}
  .faq .ans{padding:0 0 15px}
  .faq .ans p{font-size:13.5px;line-height:1.65;margin:0 0 10px}
  .legal h2{font-size:19px;margin:28px 0 10px}
  .legal h3{font-size:15px;margin:18px 0 7px}
  .legal p,.legal li{font-size:13.5px;line-height:1.65;margin:0 0 10px}
  .legal dt{font-size:11px;padding-top:2px}
  .legal small{font-size:11px}

  /* ── Tiroir de navigation ── */
  .drawer{padding:56px 20px 20px;width:min(78vw,280px)}
  .drawer-nav a{font-size:19px;padding:10px 0}
  .drawer-sub a{font-size:13px}
  .drawer-foot a{font-size:12px}
  .drawer-x{top:14px;right:14px;width:34px;height:34px;font-size:13px}

  /* ── Visionneuse plein écran : les miniatures passent sous la photo
     au lieu d'occuper le côté droit, où elles mangeraient l'image. ── */
  .lb img{max-width:92vw;max-height:56vh}
  .lbbtn{width:40px;height:40px}
  .lbprev{left:2vw}
  .lbnext,.lb.solo .lbnext{right:2vw}
  .lbthumbs{flex-direction:row;top:auto;bottom:11vh;left:50%;right:auto;transform:translateX(-50%);max-width:92vw;max-height:none;overflow-x:auto;overflow-y:hidden}
  .lb img.lbth{width:54px;height:40px}
  .lbcap{bottom:3.5vh;font-size:11px;letter-spacing:.14em;gap:14px}
}

/* 620 : listes de définitions des pages légales sur une colonne */
@media (max-width:620px){
  .legal dl{grid-template-columns:1fr;gap:2px 0}
  .legal dd{margin-bottom:12px}
}

/* Respect du réglage système « limiter les animations » : on neutralise
   tout ce qui bouge seul et on ramène les transitions à l'instantané,
   sans rien masquer. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal-on .rev{opacity:1;transform:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}