@font-face{font-family:"Newsreader";src:url(/fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Schibsted";src:url(/fonts/schibsted.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Repli metrique de Schibsted.
   font-display:swap affiche d'abord la police du systeme, puis bascule. La police du
   systeme etant plus etroite que Schibsted, le texte se RECOMPOSE a la bascule. Sur la
   fiche Corsier les trois libelles du hero passaient de deux a trois rangees, et comme
   le bloc de texte est cale en bas du hero (align-items:flex-end), tout sautait de
   32 px d'un coup : CLS 0,151, mesure du 27.08, la plus mauvaise page du site.
   Arial porte le repli parce qu'il existe sur macOS, iOS et Windows. size-adjust ramene
   sa largeur moyenne sur celle de Schibsted (mesuree sur la copie reelle du site, en
   graisse 400, celle des paragraphes et des libelles), et les trois overrides recalent
   la boite de ligne sur les metriques du fichier : ascendante 2000/2048, descendante
   -528/2048, gap nul, chacune divisee par le size-adjust.
   Sur Android, ou Arial n'existe pas, la regle est ignoree et la pile d'origine reprend
   la main : pas de repli metrique, mais rien de casse non plus.
   Si Schibsted est un jour remplace ou re-subset, ces quatre valeurs sont a recalculer. */
@font-face{
  font-family:"Schibsted repli";
  src:local("Arial"),local("Helvetica");
  size-adjust:102.99%;
  ascent-override:94.82%;
  descent-override:25.03%;
  line-gap-override:0%;
}

/* Meme chose pour le serif des titres, meme raison : sur l'accueil et sur la page
   realisations, c'est l'arrivee de Newsreader qui recomposait le h1 et decalait le bloc.
   Georgia porte le repli, il est deja en tete de la pile serif et existe sur les trois
   systemes. Largeur mesuree en graisse 500 avec opsz 60, le reglage des h1 et h2 :
   font-variation-settings change les largeurs, une mesure au canvas les ignorerait.
   Metriques du fichier : ascendante 1470/2000, descendante -530/2000, gap nul. */
@font-face{
  font-family:"Newsreader repli";
  src:local("Georgia");
  size-adjust:102.79%;
  ascent-override:71.51%;
  descent-override:25.78%;
  line-gap-override:0%;
}
:root{
  color-scheme:light;
  --sans:"Schibsted","Schibsted repli",-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader","Newsreader repli",Georgia,"Times New Roman",serif;
  --roman:"Schibsted","Schibsted repli",-apple-system,sans-serif;
  --paper:#faf6f2;--band:#f0e7e1;--ink:#491e26;--ink-2:#6d585b;--ink-3:#756265;--line:#e3d7d0;
  --dark:#38151e;--dark-2:#441a24;--on-dark:#fdfbf9;--on-dark-2:#ddd2ce;--dark-line:#56262f;
  --acc:#b08a46;--acc-2:#9c7a38;--acc-txt:#7e6332;--on-acc:#38151e;
  /* or eclairci reserve aux fonds sombres : #b08a46 n'y donne que 3.68:1, sous le
     seuil de 4.5 pour du texte normal. Mesure sur #38151e le 31.08. */
  --acc-on-dark:#d4b06a;
  --r:0;--r-sm:12px;--ang:36px;--maxw:1280px;--ease:cubic-bezier(.22,.61,.36,1);
  /* hauteur de la barre d'en-tete : le tiroir mobile se deroule pile sous elle */
  --hdh:74px;
  /* Relief discret : un decalage de 12 px a 35 % dessinait une bande sous les grands
     portraits, lue comme un cadre et non comme une ombre (Carlos, 24.08). */
  --sh-img:0 5px 15px -9px rgba(56,21,30,.24),0 1px 3px -2px rgba(56,21,30,.09);
  --sh-btn:0 4px 11px -6px rgba(56,21,30,.32);
}


:root[data-theme="light"]{--paper:#faf6f2;--band:#f0e7e1;--ink:#491e26;--ink-2:#6d585b;--ink-3:#756265;--line:#e3d7d0;}

*{margin:0;padding:0;box-sizing:border-box}
/* ===== ECHELLE TYPOGRAPHIQUE — toute taille de texte se pose sur un barreau =====
   12  libelle decoratif en capitales, avec interlettrage (.pj .meta .ty, les tags)
   14  exception rare : mentions legales, en-tetes de tableau, surtitres, libelles de champ
   16  PLANCHER du contenu lisible et de tout ce qui est interactif (cf. standard 21.08)
   17  champs de saisie uniquement — sous 16 px iOS zoome au focus, 17 donne de la marge
   18  titre de carte, question de FAQ, legende de vignette, accent court
   20  h3 de section
   22  h3 large, titre de projet en deux colonnes
   24 · 26 · 28 · 30 · 32 · 34  paliers de h2 et de chiffres cles
   au-dela : titres fluides en clamp(), un role chacun, jamais cote a cote
   Le fichier comptait 29 tailles distinctes le 26.08, dont quinze entre 14 et 21 px
   separees de moins d'un pixel : de la hierarchie invisible, du desordre visible. */
.cx{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;font-synthesis:none}
.cx img{display:block;max-width:100%}
.cx a{color:inherit;text-decoration:none}
.cx button{font-family:inherit;cursor:pointer}
/* finitions navigateur : les surfaces que le navigateur dessine portent aussi la marque.
   Focus : --acc-2 et pas --acc, il faut >=3:1 sur fond clair pour un anneau visible.
   Les champs .fld gardent leur propre etat de focus (soulignement or, outline:none). */
.cx ::selection{background:var(--acc);color:var(--on-acc)}
.cx input,.cx textarea,.cx select{caret-color:var(--acc)}
.cx :focus-visible{outline:2px solid var(--acc-2);outline-offset:3px}
.st .n,.bignum{font-variant-numeric:tabular-nums}
.cx h1,.cx h2{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-0.017em;font-variation-settings:"opsz" 60;text-wrap:balance}
/* ===== LES COUPURES DE LIGNE =====
   Les titres etaient deja en `balance`, le corps de texte n'avait rien : le navigateur
   coupe alors au plus glouton et laisse un mot seul sur la derniere ligne. `pretty`
   reserve de quoi remplir la derniere ligne, c'est exactement le remede a la veuve.
   Pose largement plutot que selecteur par selecteur : la regle n'a aucun effet sur un
   texte qui tient sur une ligne, donc rien a perdre a l'appliquer partout.
   Les SURTITRES passent en `balance` et non `pretty` : deux ou trois mots en capitales,
   ce qu'on veut c'est deux lignes de longueur egale, pas une derniere ligne remplie
   (« UNE METHODE, PAS / UNE IMPRESSION » se coupait n'importe ou). 12.09
   Ce que le CSS ne sait PAS faire, et qui se regle au build : empecher un mot d'une ou
   deux lettres de rester seul en fin de ligne (« … dormants. Y / compris en succession »),
   et la ponctuation double francaise. Voir `insecables()` dans build.py. */
.cx p,.cx li,.cx dd,.cx figcaption,.cx .lead,.cx .sub,.cx .an,.cx .tx,.cx .k,.cx summary{text-wrap:pretty}
.cx .eyebrow,.cx .zone h3,.cx .look h3{text-wrap:balance}
/* petits titres : opsz bas, sinon les delies de Newsreader deviennent trop fins */
.cx h3{font-family:var(--serif);font-weight:560;line-height:1.25;letter-spacing:-0.006em;font-variation-settings:"opsz" 24;text-wrap:balance}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.section{padding:clamp(72px,10vw,140px) 0;position:relative}
.band{background:var(--band);position:relative}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 4%,transparent) 0 1px,transparent 1px 88px);opacity:.55}
/* Pas de reglure derriere un tableau comparatif. Ailleurs elle se lit comme une texture ;
   derriere des colonnes, elle se lit comme des separateurs de colonnes qui ne tombent pas
   au bon endroit. Barbara l'a vue sans savoir la nommer (« il reste un quadrillage en
   arriere plan ici », 06.09). */
.band:has(.cmp)::before{display:none}
.band>*{position:relative;z-index:1}
.section+.section:not(.band):not(.dark){border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.dark{background:var(--dark);color:var(--on-dark);position:relative;overflow:hidden}
.section.dark:has(>.wrap>.stats){padding:clamp(48px,7vw,96px) 0} /* bande chiffres : moins haute que les sections de contenu, elle ne porte que quatre lignes (retour Carlos 04.09) */
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(70% 120% at 88% 0%,color-mix(in srgb,var(--acc) 16%,transparent) 0%,transparent 62%),radial-gradient(60% 100% at 0% 100%,rgba(255,255,255,.05) 0%,transparent 60%)}
.dark>*{position:relative;z-index:1}
.dark h1,.dark h2,.dark h3{color:var(--on-dark)}
/* Tout texte pose sur un fond sombre repasse sur les jetons clairs : --ink-2/--ink-3
   sont des bruns sombres, illisibles sur le bordeaux (audit contraste 24.08). */
.dark p,.dark li,.dark td,.dark .look p,.dark .zone-note,.dark .k,.dark figcaption,
.dark .shead .l .lead,.dark .why-head .lead,.dark .wiz .lead{color:var(--on-dark-2)}
.dark b,.dark strong,.dark .zone-note b{color:var(--on-dark)}
.dark .zone h3{color:var(--on-dark)}

/* Surtitre nu, sans carre decoratif : retire le 24.08 sur consigne Carlos
   (« tres IA, ca n'apporte rien »), regle valable pour tous les surtitres. */
/* Le surtitre nomme la section, on doit le lire pour savoir ou on est : 14 px, gras,
   et l'or lisible sur fond clair (--acc-txt, le meme que le role de Barbara) plutot
   que le gris. En 13 px maigre et gris il passait pour une decoration. */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--roman);font-size:14px;font-weight:650;text-transform:uppercase;letter-spacing:.12em;color:var(--acc-txt)}
.dark .eyebrow{color:var(--on-dark-2)}

.arrow-ur{display:inline-block;width:1em;height:1em;flex-shrink:0}
.btn{display:inline-flex;align-items:center;gap:.55em;justify-content:center;text-align:center;height:54px;padding:0 28px;border-radius:0;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-weight:600;font-size:16px;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn svg{transition:transform .2s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn-acc{background:var(--acc);color:var(--on-dark);border-color:var(--acc)} /* libelle en blanc casse, plus lisible que le bordeaux sur l'or */
.cx a.btn-acc,.cx a.btn-line{color:var(--on-dark)} /* bat le color:inherit de .cx a, sinon les CTA <a> dores restent sombres */
/* Le piege s'est referme une deuxieme fois le 31.08, sur .btn-line passe en dore :
   `.cx a` pese (0,1,1) et `.btn-line` (0,1,0), donc le lien heritait la couleur du
   texte de la page et sortait en bordeaux sur or. Toute nouvelle variante de bouton
   posee sur un <a> doit etre ajoutee a cette ligne. */
.btn-acc:hover{background:var(--acc-2);border-color:var(--acc-2)}
/* Relief (24.08, Carlos : « un peu brut, ca fait amateur ») : angles droits conserves
   (choix de Barbara), le relief vient d'une ombre douce teintee bordeaux, jamais d'un
   arrondi. S'applique aux boutons pleins et aux images de contenu ; pas aux tuiles
   .pj .imgw dont le volet clip-path mangerait l'ombre. */
.btn-acc,.bar button{box-shadow:var(--sh-btn)}
/* Pas d'ombre sous les images : meme adoucie, elle dessine une bande sombre d'une
   quinzaine de pixels sous le bord, lue comme un cadre et pas comme un relief
   (Carlos, 24.08, deux fois). Le relief reste sur les boutons et sur les cartes de
   #pourquoi-nous, qui ont un contour et ne flottent donc pas. */
/* Etat de chargement (24.08, Carlos : « on voit le cadre avant que la photo charge ») :
   c'est app.js qui garantit l'essentiel en retardant le reveal (.in) d'un bloc jusqu'au
   chargement de ses images. Le fond teinte ci-dessous n'est qu'un dernier recours,
   visible uniquement sans JavaScript ou pendant un decodage tres lent. */
.pj .imgw,.gal a{background:color-mix(in srgb,var(--ink) 7%,var(--band))}
.btn-line{background:var(--acc);color:var(--on-dark);border-color:var(--acc);box-shadow:var(--sh-btn)}
.btn-line:hover{background:var(--acc-2);border-color:var(--acc-2)}
/* La banniere cookies garde ses trois surfaces distinctes : accepter en plein, refuser et
   enregistrer en contour. C'est une decision a trois branches, pas trois appels a l'action,
   et la loi demande que refuser se voie autant qu'accepter. */
.ck-acts .btn-line{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.ck-acts .btn-line:hover{background:transparent;border-color:var(--ink)}
/* Sur une bande photo, un bouton dore se noie dans les tons chauds de l'image et perd le
   contraste que le doré lui donne partout ailleurs. Il y reste clair : contour blanc sur
   la photo, c'est la surface la plus lisible qu'on puisse poser dessus. */
.on-photo .btn-line,.final .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.on-photo .btn-line:hover,.final .btn-line:hover{background:rgba(255,255,255,.12);border-color:#fff}
.on-photo .btn-line:hover,.final .btn-line:hover{background:#fff;color:#111;border-color:#fff}
.linkA{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:16px;color:var(--ink)}
.linkA .c{width:34px;height:34px;border-radius:50%;background:var(--acc);color:var(--on-dark);border:1px solid var(--acc);display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s}
.linkA:hover .c{background:var(--acc);border-color:var(--acc);color:var(--on-dark)}
.dark .linkA{color:var(--on-dark)}

/* watermark */
.wm{position:absolute;left:-4vw;z-index:0;font-weight:800;letter-spacing:-0.045em;line-height:.78;text-align:left;pointer-events:none;
  font-size:clamp(4.5rem,19vw,19rem);color:color-mix(in srgb,var(--ink) 4%,transparent);-webkit-text-stroke:.8px color-mix(in srgb,var(--ink) 6%,transparent);white-space:nowrap;user-select:none;transform:rotate(-7deg);transform-origin:left bottom}
.dark .wm{color:rgba(255,255,255,.055);-webkit-text-stroke-color:rgba(255,255,255,.11)}
.on-photo .wm{color:rgba(255,255,255,.07);-webkit-text-stroke-color:rgba(255,255,255,.16)}

/* ===== HEADER ===== */
/* no-repeat n'est pas decoratif, il enleve une ligne noire de 1 px sur toute la largeur,
   sous l'en-tete, sur toutes les pages (releve par Barbara le 01.09 : « ligne noire a
   enlever si possible »). La barre fait 75 px : 74 de contenu et le border-bottom de 1 px,
   transparent tant qu'on n'a pas defile. Or un fond se DIMENSIONNE par defaut sur la boite
   de padding (74 px) et se DESSINE jusqu'a la boite de bordure (75 px) : le degrade tenait
   donc dans 74 px et la ligne de bordure affichait le debut de la tuile suivante, c'est-a-dire
   son point le plus sombre, rgba(22,8,12,.55). Verifie a l'arithmetique : sur un fond de
   photo a (78,84,100), la ligne mesurait exactement (47,42,51). */
.hd{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .3s,border-color .3s,transform .45s var(--ease);border-bottom:1px solid transparent;background:linear-gradient(to bottom,rgba(22,8,12,.55),rgba(22,8,12,.1) 60%,transparent);background-repeat:no-repeat}
.hd.scr{background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hd .row{display:flex;align-items:center;justify-content:space-between;height:var(--hdh);gap:20px}
.logo{display:flex;align-items:center;gap:11px;color:#fff}
.hd.scr .logo,.hd.scr .nav a{color:var(--ink)}
.logo .mk{width:26px;height:26px;border-radius:0;background:var(--acc);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.logo .mk svg{width:15px;height:15px;color:var(--on-acc)}
.logo .tx{font-weight:700;font-size:20px;letter-spacing:.14em}
/* logo definitif, vectorise depuis les .ai du client. Ratio 3.692, on pilote par
   la largeur : les filets de construction de la marque sont trop fins pour etre
   contraints par la hauteur. Deux variantes monochromes, l'or d'origine (#b1a268)
   n'est pas tout a fait celui du site (#b08a46) et se battrait avec lui. */
/* Logo livre par Barbara le 08.09, en deux versions : la version d'origine pour les fonds
   clairs, une version repeinte pour les fonds sombres, ou l'echafaudage noir du trace
   disparaissait (l'aller-retour du 09.09 s'est termine sur la version repeinte). Les deux
   sortent de _src/media/make-logos.py. La boite est au ratio exact du fichier (3.36),
   sinon `contain` laisse du vide d'un cote. */
.brand-logo{display:inline-block;width:181px;height:54px;background:url('/media/logo-cimmeco-light.webp') left center/contain no-repeat;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.hd.scr .brand-logo{background-image:url('/media/logo-cimmeco-dark.webp');filter:none}
/* le footer prend le logo empile, mot-marque sous la marque */
.ft-brand .brand-logo{width:150px;height:119px;background-image:url('/media/logo-cimmeco-footer.webp');filter:none}
/* 24 et pas 28 : a six entrees, l'ecart d'origine ne laissait que 7 px entre la nav et
   le bouton a 1440 px, la moindre retouche de libelle aurait recasse l'en-tete. */
.nav{display:flex;gap:24px}
.nav a{color:#fff;font-size:16px;font-weight:600;letter-spacing:.05em;opacity:.9;transition:opacity .2s;white-space:nowrap}
.nav a:hover{opacity:1}
/* La page courante. Le filet vit en ::before : le ::after de l'entree a deroulant porte
   deja son chevron. Il n'est pose que sur les entrees de la barre, jamais dans le panneau
   deroulant, ou un filet flottant tomberait a cote du libelle. */
.hd .nav a{position:relative}
.hd .nav a.actif{opacity:1}
.hd .nav>a.actif::before,.hd .nav .nav-item>a.actif::before{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--acc)}
.hd.scr .nav>a.actif::before,.hd.scr .nav .nav-item>a.actif::before{background:var(--acc-txt)}
.hd .nav .sub a.actif{color:var(--acc-txt);background:var(--band)}
/* Dans le tiroir, pas de filet flottant : le libelle actif passe en or. */
.mm nav a.actif{color:var(--acc-txt)}
/* Le deroulant Estimation. « Estimation » reste un lien, le panneau ne fait qu'ouvrir la
   fourche gratuit / payant. Il s'ouvre au survol ET au focus clavier (:focus-within), et un
   pont invisible de 12 px evite qu'il se referme dans l'espace entre l'entree et le panneau. */
.nav .nav-item{position:relative;display:inline-flex;align-items:center}
.nav .nav-item>a::after{content:"";width:6px;height:6px;margin-left:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);display:inline-block;opacity:.75;transition:transform .25s var(--ease)}
.nav .nav-item:hover>a::after,.nav .nav-item:focus-within>a::after{transform:rotate(225deg) translateY(-3px)}
.nav .nav-item::before{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.nav .sub{position:absolute;top:calc(100% + 14px);left:-18px;min-width:262px;display:grid;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-img);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .28s var(--ease),visibility .2s;z-index:130}
.nav .nav-item:hover .sub,.nav .nav-item:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{color:var(--ink);opacity:1;font-size:16px;font-weight:600;letter-spacing:0;padding:11px 18px;transition:background-color .2s,color .2s}
.nav .sub a:hover{background:var(--band);color:var(--acc-txt)}
.hd-right{display:flex;align-items:center;gap:14px}
/* .hd requis : le telephone est un <a>, et .cx a{color:inherit} battrait .callpill seul */
.hd .callpill{display:flex;align-items:center;gap:10px;color:#fff;font-size:16px;font-weight:700;white-space:nowrap}
/* Dans l'en-tete, l'icone seule : le numero ecrit doublait la pastille et poussait le
   bouton d'estimation. Le span reste dans le DOM, c'est lui que le tiroir mobile clone
   pour afficher le numero en entier (.mm-call). */
.hd .callpill span:not(.c){display:none}
.hd.scr .callpill{color:var(--ink)}
.callpill .c{width:38px;height:38px;border-radius:50%;background:var(--acc);color:var(--on-dark);display:inline-flex;align-items:center;justify-content:center}
.hd .cta{height:48px;padding:0 22px;border-radius:0;background:var(--acc);color:var(--on-dark);font-size:16px;font-weight:650;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s;white-space:nowrap}
.hd.scr .cta{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hd .cta:hover{background:var(--acc);color:var(--on-dark)}
/* trois barres et non un SVG : c'est ce qui permet de les plier en croix a l'ouverture
   du tiroir, dans le meme geste, plutot que d'echanger deux icones */
.burger{display:none;width:44px;height:44px;border-radius:0;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{width:18px;height:2px;background:currentColor;transition:transform .4s var(--ease),opacity .2s var(--ease)}
.hd.scr .burger{border-color:var(--line);color:var(--ink)}

/* Tiroir ouvert : l'en-tete ne disparait pas sous un second bandeau, il passe sur fond
   clair et reste a sa place. Le logo ne bouge donc jamais, et le bouton se plie en croix
   la ou on vient d'appuyer. */
/* la barre passe au papier en 160 ms et non en 300 : au-dela, le degrade sombre du mode
   photo tenait encore pendant que le volet clair descendait dessous, et on lisait une
   bande grise au-dessus du tiroir. La barre mene, le tiroir suit. */
.hd.mmopen{background:var(--paper);border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .16s var(--ease),border-color .16s var(--ease)}
.hd.mmopen .logo,.hd.mmopen .nav a{color:var(--ink)}
.hd.mmopen .brand-logo{background-image:url('/media/logo-cimmeco-dark.webp');filter:none}
/* le telephone et l'estimation sont dans le tiroir, en entier : les garder aussi dans la
   barre les afficherait deux fois. Ils s'effacent sans quitter la mise en page, sinon la
   croix sauterait vers la droite au moment ou on appuie dessus. */
.hd .callpill,.hd .cta{transition:opacity .25s var(--ease),background .2s,color .2s}
.hd.mmopen .callpill,.hd.mmopen .cta{opacity:0;pointer-events:none}
.hd.mmopen .burger{border-color:var(--line);color:var(--ink)}
.hd.mmopen .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd.mmopen .burger i:nth-child(2){opacity:0}
.hd.mmopen .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;min-height:min(100svh,900px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:kb 20s ease-out forwards}
/* portrait de groupe : on cale sur le haut du cadre pour garder les visages,
   c'est le bas de l'image qui se fait ronger par la hauteur du hero */
[data-page="a-propos"] .hero .bg{object-position:50% 12%}
/* en mobile l'image est verticale : le cadrage est deja bon, on recentre */
@media(max-width:640px){[data-page="a-propos"] .hero .bg{object-position:50% 28%}}
/* le <picture> ne doit pas casser le positionnement absolu de l'image */
.hero picture{display:contents}
/* la video se pose par-dessus le poster et n'apparait que lorsqu'elle est prete.
   Pas de Ken Burns dessus : le mouvement est deja dans le plan. */
.hero .vid{opacity:0;animation:none;transition:opacity .8s ease}
.hero .vid.is-ready{opacity:1}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,8,12,.5) 0%,rgba(22,8,12,.16) 26%,rgba(26,10,14,.4) 58%,rgba(24,9,13,.84) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(22,8,12,.74) 0%,rgba(22,8,12,.38) 42%,rgba(22,8,12,0) 78%)}
.hero h1,.hero .sub,.hero .eyebrow{text-shadow:0 2px 26px rgba(18,6,10,.45)}
/* le filigrane part a droite, dans la zone de photo laissee libre par la colonne
   de texte : superpose au titre et au paragraphe il chargeait la lecture. Il est
   donc aussi plus petit que le filigrane de section, et bascule sur l'ancrage
   droit deja utilise par .mani (rotation inverse, sinon il redescend vers la barre).
   Il reste bas : c'est la seule bande ou le voile sombre est garanti sur toute la
   largeur, ailleurs a droite l'image est en clair et le blanc a 10% disparait. */
.hero .wm{bottom:6vw;left:auto;right:-1vw;z-index:1;text-align:right;
  font-size:clamp(3.4rem,9vw,12rem);transform:rotate(7deg);transform-origin:right bottom;
  color:rgba(255,255,255,.10);-webkit-text-stroke-color:rgba(255,255,255,.21)}
.hero-in{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:clamp(40px,5vw,60px)}
.hero .eyebrow{color:#fff;margin-bottom:20px}
.hero h1{color:#fff;font-size:clamp(2.4rem,5.4vw,4.5rem);font-weight:520;max-width:15ch;letter-spacing:-0.035em}
/* L'accueil est le seul titre coupe a la main, en deux lignes. Il lui faut la largeur
   de sa ligne la plus longue, sinon la coupure imposee se recoupe toute seule. */
.hero.on-photo:not(.phero) h1{max-width:27ch}
.hero .sub{color:rgba(255,255,255,.86);font-size:clamp(1rem,1.5vw,1.25rem);max-width:44ch;margin-top:20px;line-height:1.5}
/* 44ch coupait « en fonction de son potentiel de / developpement » et laissait des
   lignes a moitie vides sous un titre large. */
.hero.on-photo:not(.phero) .sub{max-width:62ch}
/* L'en-tete est fixe (74px, 64 sous 640) et #hero-bar est un div nu : sans cette marge,
   les CTA qui pointent dessus posent le champ commune SOUS l'en-tete, donc invisible. */
#hero-bar{scroll-margin-top:100px}
@media (max-width:640px){#hero-bar{scroll-margin-top:88px}}
/* toute section ciblee par une ancre atterrit sous l'en-tete fixe */
.section[id]{scroll-margin-top:84px}
/* « Aller au formulaire » vise le formulaire et pas la section : sur telephone la
   photo et les coordonnees passent avant lui, le bouton atterrissait 1100 px trop haut. */
#cform{scroll-margin-top:84px}
/* bouton + lien secondaire dans un corps de split : la colonne est trop etroite pour
   les poser cote a cote, donc le lien vit sous le bouton, centre sur sa largeur,
   avec de l'air entre les deux (Carlos, 24.08) */
.cta-row{display:inline-flex;flex-direction:column;gap:14px;margin-top:14px}
.cta-row .btn{margin-top:0}
/* Bouton a libelle long : sur telephone il passe sur deux lignes, et la coupe se fait a la
   virgule, jamais dans « contactez-moi » (Carlos 17.09, note 12 de /vendre). Le <br class="mob">
   ne vit que sous 640 px, la hauteur fixe de .btn cede la place a un min-height. */
.btn .mob{display:none}
@media(max-width:640px){
  .btn.deux{height:auto;min-height:54px;padding:12px 24px;line-height:1.3}
  .btn.deux .mob{display:inline}
  .btn.deux .lbl{white-space:nowrap}
}
.cta-row .linkU{align-self:center}
/* Un bouton aligne a gauche sous un paragraphe qui prend toute la largeur se lit comme un
   troisieme alignement, en plus du texte et des images. Sur mobile tous les boutons de
   contenu se centrent, sur toutes les pages. Sont exclus ceux qui vivent dans une barre ou
   une grille a eux : l'en-tete, le tiroir, la banniere cookies et les filtres. */
@media(max-width:640px){
  .cta-row{display:flex;align-items:center;align-self:center}
  /* align-self ne fait rien dans un parent en display:block, et margin:auto n'a pas de
     largeur a repartir sur un inline-flex : il faut les deux, la largeur au contenu et
     les marges automatiques. */
  /* Les tuiles font exception : dans une carte, un bouton centre se decolle de son
     texte, qui lui reste a gauche. .mi n'est donc pas dans cette liste. */
  .body>.btn,.body>.linkU,.shead .btn,.vin>.btn,.proj-foot>.btn,.zone-note>.btn,
  .why-cta>.btn,.why-cta>.linkU{
    display:flex;width:fit-content;margin-left:auto;margin-right:auto;align-self:center;
    text-align:center}
  .proj-foot,.vin,.row,.why-cta{justify-content:center;align-items:center}
}
/* En pleine largeur de colonne, un bouton qui fait 80 % de la ligne et un lien recentré
   dessous se lisent comme deux alignements différents. Sur mobile la paire se centre en
   bloc, les deux partagent alors le même axe. */
@media(max-width:640px){
  .cta-row{display:flex;align-items:center;align-self:center}
}
.bar{margin-top:32px;display:flex;align-items:stretch;max-width:640px;background:rgba(26,11,15,.42);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);padding:8px;gap:8px}
.bar .fw{flex:1;display:flex;flex-direction:column;justify-content:center;padding:8px 14px}
.bar label{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.78)}
/* Le champ se lit comme un champ : cadre et fond propres, sinon libelle + placeholder
   passent pour du texte pose sur la photo et personne ne comprend qu'il faut taper
   (retour Carlos 17.09). */
.bar input{border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:16px;padding:9px 12px;margin-top:7px;border-radius:4px;transition:border-color .2s,background .2s}
.bar input::placeholder{color:rgba(255,255,255,.55)}
.bar input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.16)}
.bar button{border:0;border-radius:0;background:var(--acc);color:var(--on-dark);padding:0 24px;font-weight:650;font-size:16px;display:flex;align-items:center;gap:.5em;transition:background .2s}
.bar button:hover{background:var(--acc-2)}
/* en-tete des pages interieures : meme habillage que le hero, en plus court */
.phero{min-height:min(62svh,620px)}
.phero .hero-in{padding-top:clamp(130px,14vw,170px)}
.phero h1{font-size:clamp(2.2rem,4.6vw,3.7rem);max-width:18ch}
/* /vendre : « Avant de vendre, comparez les quatre chemins. » tombait sur trois lignes a 18ch,
   le titre doit tenir en deux sur desktop (Carlos 17.09). Mesure : les 16 autres h1 tiennent. */
.phero h1.wide{max-width:26ch}
/* H1 a deux etages (01.10.2026) : la petite ligne au-dessus du titre est DANS le h1, pour
   que Google lise le mot-cle (« Estimation immobiliere gratuite ») en tete du titre de la
   page. Le titre lui-meme vit dans .ht, que app.js decoupe ligne par ligne. Les largeurs
   maximales des regles ci-dessus passent du h1 a .ht, sinon elles bridaient la petite
   ligne : a l'oeil, rien ne doit bouger. */
.hero h1.hh,.hero.on-photo:not(.phero) h1.hh,.phero h1.hh,.phero h1.hh.wide{max-width:none}
.hero h1.hh .eyebrow{display:flex;margin-bottom:20px;line-height:1.6;font-variation-settings:normal}
.hero h1.hh .ht{display:block;max-width:15ch}
.hero.on-photo:not(.phero) h1.hh .ht{max-width:27ch}
.phero h1.hh .ht{max-width:18ch}
.phero h1.hh.wide .ht{max-width:26ch}
.phero .sub{max-width:56ch}
/* Un bouton pose directement dans le hero : il lui faut sa respiration, le chapo
   au-dessus n'en donne aucune. Sur /vendre, les pastilles de reassurance passent
   SOUS lui (retour Carlos du 08.09) : l'appel a l'action vient en premier, les
   raisons de le suivre juste apres. Meme ordre que le formulaire de l'accueil. */
.hero-in>.btn{margin-top:28px}
.hero-in>.btn+.htrust{margin-top:22px}
/* Deux actions cote a cote sous le chapeau du hero contact : appeler, ou descendre au
   formulaire (retour Carlos 08.09, en remplacement de la bande sombre au gros numero).
   La note d'horaires qualifie le bouton d'appel, elle porte les memes heures que la
   fiche Google. */
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-acts .btn{margin-top:0}
.hnote{margin-top:14px;color:rgba(255,255,255,.85);font-size:16px}
.hero-in>.hero-acts+.htrust,.hero-in>.hnote+.htrust{margin-top:22px}
/* Sur telephone les deux ne tiennent pas sur une ligne : ils passent l'un sous l'autre,
   a la meme largeur, sinon un bouton court sur le premier rang et un long sur le second
   font deux bords droits differents. */
@media(max-width:640px){
  .hero-acts{flex-direction:column;align-items:stretch;gap:10px}
  .hero-acts .btn{justify-content:center}
}
.htrust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;list-style:none}
.htrust li{color:rgba(255,255,255,.85);font-size:16px;display:flex;align-items:center;gap:9px}
.htrust li svg{color:var(--acc);flex:0 0 auto}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{position:relative;display:flex;flex-direction:column;gap:6px}
/* Les champs sont des boites blanches cerclees, comme les cartes .choice : sur ce site,
   ce qui est blanc et cercle est ce sur quoi on agit. En simple trait souligne sur fond
   creme ils se lisaient comme du texte et pas comme un champ (Carlos, 26.08). */
.fld label{font-size:14px;font-weight:650;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.fld input,.fld select{height:52px;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink);padding:0 14px;font-family:inherit;font-size:17px;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent)}
.fld input::placeholder,.fld textarea::placeholder{color:color-mix(in srgb,var(--ink-3) 72%,#fff)}
.fld.full{grid-column:1/-1}
.fld .opt{text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink-3);font-size:14px}
.fld.err input,.fld.err select{border-color:#b3261e}
.fld textarea{border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink);padding:12px 14px;font-family:inherit;font-size:17px;line-height:1.5;resize:vertical;min-height:120px;transition:border-color .2s,box-shadow .2s}
.fld textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent)}
.fld.err textarea{border-color:#b3261e}
/* etape 2 en questionnaire : cartes a icones et puces de creneau */

.choices{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choices.err .choice{border-color:#b3261e}
.choice{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;padding:13px 14px;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.choice input,.chip input{position:absolute;opacity:0;pointer-events:none}
.choice .ci{color:var(--acc-2);line-height:0;flex-shrink:0}
.choice .cl{font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.choice:hover{border-color:var(--acc-2)}
.choice:has(input:checked){border-color:var(--dark);background:var(--dark)}
.choice:has(input:checked) .cl{color:#fff}
.choice:has(input:checked) .ci{color:var(--acc)}
.choice:has(input:focus-visible),.chip:has(input:focus-visible){outline:2px solid var(--acc-2);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;border:1px solid var(--line);background:#fff;padding:12px 15px;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--acc-2)}
.chip:has(input:checked){background:var(--dark);border-color:var(--dark);color:#fff}
.ask{position:relative}
.ask.err .choice,.ask.err .chip{border-color:#b3261e}
/* Bulle d'erreur ancree sous le champ fautif. Une seule a la fois : dire la chose
   la plus proche du geste plutot qu'une liste en bas de formulaire (Carlos, 24.08). */
.tip{position:absolute;z-index:30;top:calc(100% + 10px);left:0;width:max-content;max-width:min(300px,86vw);
  background:var(--dark);color:var(--on-dark);font-size:16px;font-weight:600;line-height:1.4;
  padding:9px 13px;box-shadow:0 12px 26px -16px rgba(56,21,30,.7);
  animation:tipIn .18s var(--ease) both}
.tip::before{content:"";position:absolute;bottom:100%;left:17px;border:6px solid transparent;border-bottom-color:var(--dark)}
@keyframes tipIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tip{animation:none}}
/* ===== PAGE QUESTIONNAIRE (cimmeco-estimer.html) ===== */
.section.wizsec{padding-top:calc(74px + clamp(64px,9vw,96px));overflow:hidden} /* .section.wizsec : bat le .section generique des media queries mobiles */
@media(max-width:640px){.section.wizsec{padding-top:calc(var(--hdh) + 30px)}} /* 138 px de vide sous la barre en telephone, resserre (Carlos 18.09) */
/* A la taille de section, ESTIMER traversait le formulaire de part en part et passait
   sous les champs (Carlos, 24.08). On le rentre dans le coin bas droite : plus petit,
   decale a droite, et rogne par l'overflow de la section. */
.wizsec .wm{top:auto;bottom:-2.5vw;left:auto;right:-6vw;text-align:right;
  font-size:clamp(3rem,11.5vw,11rem);transform:rotate(7deg);transform-origin:right bottom}
.wiz{max-width:720px;margin:0 auto}
.wiz .eyebrow{white-space:nowrap}
.wiz h1{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.wiz .lead{color:var(--ink-2);font-size:16px;line-height:1.6;margin-top:14px}
/* Le rail est decoupe en quatre segments par un masque, rail et remplissage
   ensemble : on compte les ecrans du questionnaire d'un coup d'oeil au lieu de
   les deduire d'un taux de remplissage. Un masque plutot qu'un fond peint dans
   les trous, parce que la section change de couleur en mode sombre. */
.wprog{--wseg:linear-gradient(90deg,#000 0 calc(25% - 3px),transparent calc(25% - 3px) calc(25% + 3px),#000 calc(25% + 3px) calc(50% - 3px),transparent calc(50% - 3px) calc(50% + 3px),#000 calc(50% + 3px) calc(75% - 3px),transparent calc(75% - 3px) calc(75% + 3px),#000 calc(75% + 3px) 100%);height:3px;background:var(--line);margin:28px 0 8px;overflow:hidden;-webkit-mask-image:var(--wseg);mask-image:var(--wseg)}
.wprog span{display:block;height:100%;width:0;background:var(--acc-2);transition:width .45s var(--ease)}
.wcount{display:none} /* « Etape n sur 4 » retire, la barre suffit (Carlos 18.09) */
.wprog{margin-bottom:18px}
.wstep{display:none}
.wstep.on{display:block;animation:win .45s var(--ease)}
@keyframes win{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Le questionnaire est un objet pose sur la bande, pas la suite du texte d'intro :
   la question et son champ se noyaient dans le creme (Carlos, 26.08). */
.wiz form{background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-img);padding:clamp(20px,3.2vw,30px)}
.wq{font-size:clamp(1.375rem,2.1vw,1.625rem);margin-bottom:20px}
.wnav{display:flex;gap:10px;margin-top:22px}
.wnav .btn{flex:1;width:auto;margin-top:0}
.wnav .btn[hidden]{display:none}
.wiz .choices{grid-template-columns:1fr 1fr}
.wiz .choice{padding:18px 16px}
.wiz .wnext{margin-top:18px}
.walt{margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid var(--line);font-size:16px;color:var(--ink-2)}
#wiz-ou b{font-weight:inherit}
.when{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.wlab{display:block;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:16px 0 8px}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg.err .chip{border-color:#b3261e}
.seg .chip{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 8px}
.fld input[type=date]{color-scheme:light}
/* Calendrier maison. La fenetre de l'input date est dessinee par le navigateur et
   n'est pas stylable : on masque son icone, on garde l'input comme source de verite
   (valeur ISO, min, validation) et on ne remplace que la fenetre. Le champ se coupe
   en deux : les segments jj/mm/aaaa restent tapables, tout le reste de la ligne
   ouvre le calendrier. */
.dpick{position:relative}
.dpick .dpin{display:flex;align-items:center;height:52px;padding:0 12px 0 14px;border:1px solid var(--line);background:#fff;transition:border-color .2s,box-shadow .2s}
.dpick .dpin:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent)}
.dpick input[type=date]{flex:0 0 auto;width:auto;height:auto;border:0;background:transparent;padding:0;box-shadow:none}
.dpick input[type=date]:focus{box-shadow:none}
.dpick input[type=date]::-webkit-calendar-picker-indicator{display:none}
.dpick .dpzone{flex:1;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;
  padding:0 2px;background:transparent;border:0;color:var(--ink-3);cursor:pointer;transition:color .2s}
.dpick .dpzone:hover{color:var(--acc-2)}
.fld.err .dpin{border-color:#b3261e}
.dpop{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:min(322px,calc(100vw - 40px));
  background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(56,21,30,.38);padding:15px}
.dpop[hidden]{display:none}
.dphd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dphd b{font-family:var(--serif);font-weight:560;font-size:18px;letter-spacing:-.006em;text-transform:capitalize}
.dpnav{display:flex;gap:5px}
.dpnav button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
.dpnav button:hover:not(:disabled){border-color:var(--acc);color:var(--acc-2)}
.dpnav button:disabled{opacity:.28;cursor:default}
.dpdow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px}
.dpdow span{text-align:center;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.dpgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dpgrid button{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;font-family:inherit;font-size:16px;color:var(--ink);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.dpgrid button:hover:not(:disabled){border-color:var(--acc)}
.dpgrid button:disabled{color:color-mix(in srgb,var(--ink) 25%,transparent);cursor:default}
.dpgrid button.sel{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:700}
.bar .fw.err{box-shadow:inset 0 -2px 0 #ff8a80}
#lead .form-err{color:#ffb4a8;margin-top:10px;text-shadow:0 1px 12px rgba(18,6,10,.5)}
/* piege a robots : hors ecran plutot que display:none, que certains bots ignorent */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-err{margin-top:12px;font-size:16px;font-weight:650;color:#b3261e}
.promise{margin-top:14px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.legal{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-2);opacity:.8}
.wiz .btn{width:100%;margin-top:18px}
/* Confirmation d'envoi. Etait un aplat or avec le texte sombre dessus et le lien de retour
   noye dans la phrase (Carlos, 15.09 : « pas foufou »). Devient une carte sur fond beige,
   filet or a gauche, et le retour a l'accueil en bouton secondaire sous le texte. */
/* Confirmation : plus d'encart dans l'encart (fond beige + filet or dans la carte blanche,
   « tres moche » selon Carlos 17.09). Une coche dans un disque or, le titre, une phrase,
   un bouton. Centre, sans cadre : la carte du questionnaire est deja le cadre. */
.done{display:none;text-align:center;padding:10px 0 4px;color:var(--ink);font-size:17px;line-height:1.6}
.done.on{display:block}
.done .dk{width:60px;height:60px;border-radius:50%;background:var(--acc);color:var(--on-dark);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
.done b{font-weight:700;display:block;font-family:var(--serif);font-size:26px;line-height:1.2;margin-bottom:10px}
.done p{color:var(--ink-2);max-width:40ch;margin:0 auto}
.done .btn{margin-top:22px}
.done:focus{outline:none} /* focus programmatique a l'envoi : le cadre or autour du bloc n'avait aucun sens (Carlos 17.09) */

/* ===== STATS (dark) =====
   Bandeau editorial refait le 24.08 (Carlos : la grille gros-chiffre-au-dessus-du-
   label « fait trop IA »). Meme principe que la regle icone-titre : chiffre a
   gauche, libelle a droite, sur UNE ligne, jamais empiles. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.st{padding:4px 26px;border-left:1px solid var(--dark-line);display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
/* Les trois points de l'heritage familial, sous la bande de chiffres. Ils etaient
   arrives en liste a puces posee sur le fond sombre, sans style : icone en tete,
   titre, texte, ils se lisent comme les .look de l'accueil (retour Carlos 08.09). */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);margin-top:clamp(34px,4.4vw,52px);padding-top:clamp(30px,3.6vw,42px);border-top:1px solid var(--dark-line)}
/* Icone et titre sur la meme ligne, icone dans un cercle de 48 px comme les .look de
   l'accueil : l'icone nue posee au-dessus du titre se lisait comme decalee (Carlos 17.09). */
.pil{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:10px;align-items:center}
.pil .ic{color:var(--acc);line-height:0;display:inline-flex;width:48px;height:48px;border-radius:50%;border:1px solid var(--dark-line);align-items:center;justify-content:center}
.pil h3{font-size:1.125rem;font-weight:600;letter-spacing:-.004em;margin:0}
.pil p{grid-column:1/-1}
.pil p{font-size:16px;line-height:1.55}
@media(max-width:840px){.pillars{grid-template-columns:1fr;gap:26px}}
.st:first-child{border-left:0;padding-left:0}
.st .n{font-size:2rem;font-weight:700;letter-spacing:-0.02em;line-height:1}
.st .n em{color:var(--acc-2);font-style:normal}
.st .k{font-size:16px;color:var(--on-dark-2);margin-top:0;line-height:1.4}

/* ===== SECTION HEAD ===== */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,58px)}
.shead .l .eyebrow{margin-bottom:16px}
.shead h2,.why-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch}

/* manifesto */
.mani{position:relative;overflow:hidden}
.mani .wm{top:auto;bottom:clamp(20px,4vw,60px);left:auto;right:-5vw;text-align:right;transform:rotate(7deg);transform-origin:right bottom}
/* La phrase de gauche se centre sur la colonne de texte : calee en bas (align-items:end),
   elle flottait sous le milieu et paraissait mal posee (Carlos 17.09, fiche Corbieres). */
.mani-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.mani .big{font-size:clamp(1.9rem,4.2vw,3.3rem);font-weight:640;letter-spacing:-0.03em;line-height:1.08;max-width:18ch}
.mani .txt{max-width:42ch}
.mani .txt .eyebrow{margin-bottom:16px}
.mani .txt p{color:var(--ink-2);margin-bottom:16px}

/* ===== TABBED SHOWCASE ===== */
.pills{display:flex;gap:24px;flex-wrap:wrap}
.pill{padding:9px 2px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--ink-3);font-weight:600;font-size:16px;transition:color .2s,border-color .2s}
.pill.on{background:transparent;color:var(--ink);border-bottom-color:var(--acc)}
/* ===== POURQUOI NOUS CONFIER VOTRE BIEN (accueil, #showcase) =====
   Remplace la scene a onglets du 09.08. Celle-ci empruntait .pills, qui est le filtre
   de la galerie Realisations : meme barre d'onglets, meme grande image, meme carte
   posee dessus. Le bloc se lisait donc comme un portfolio et pas comme un argumentaire,
   et il cachait trois arguments sur quatre derriere un clic, le quatrieme onglet tombant
   hors ecran sur telephone. Ici les quatre sont visibles d'un coup, et la ligne .els
   porte la comparaison, qui est la mecanique qui convainc reellement sur ce site.
   Ordre voulu sur mobile : titre, les quatre lignes, puis la photo et l'appel a agir,
   d'ou les grid-areas plutot qu'un simple empilement de colonnes. */
/* Colonne de gauche (texte + photo + boutons) en un seul bloc collant : elle reste
   a l'ecran pendant que les cinq differences defilent a droite. Avant, texte et
   photo etaient deux zones de grille etirees sur la hauteur de la liste, d'ou un
   vide de 200 px entre les deux (retour Carlos 04.09). Le sommet est celui de
   .faq-card. Sur mobile .why-side disparait (display:contents) et les zones
   nommees remettent la photo apres la liste. */
.why{display:grid;grid-template-columns:0.84fr 1fr;gap:0 clamp(38px,5vw,74px);align-items:start}
.why-side{position:sticky;top:98px}
.why-foot{margin-top:clamp(28px,3.4vw,40px)}
.why-head .eyebrow{margin-bottom:16px}
.why-head .lead{margin-top:16px}
.why-pic{aspect-ratio:5/4;overflow:hidden;border-radius:var(--r);background:var(--band)}
.why-pic img{width:100%;height:100%;object-fit:cover;display:block}
.why-cta{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:26px}
/* Pas d'icone, pas d'encart : la comparaison est dans la phrase, pas dans un
   dispositif visuel. Chaque ligne ne pose que deux niveaux, un titre et un
   paragraphe, sinon la hierarchie se brouille et on lit le decor avant le texte. */
.why-list{list-style:none;margin:0;padding:0}
.wrow{padding:clamp(22px,2.5vw,30px) 0;border-top:1px solid var(--line);max-width:62ch}
.wrow:first-child{border-top:0;padding-top:0}
.wrow:last-child{padding-bottom:0}
.wrow h3{font-size:clamp(1.25rem,1.6vw,1.375rem);letter-spacing:-0.01em;line-height:1.25}
.wrow p{margin-top:10px;color:var(--ink-2);line-height:1.62}

/* ===== PROCESS ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px)}
.pstep{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:22px}
.pstep .bd{grid-column:1;grid-row:1;display:block;color:var(--acc-2);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1;min-width:1.2ch}
.pstep .bd .no{display:block;font-variant-numeric:tabular-nums}
.pstep h3{grid-column:2;grid-row:1;font-size:1.375rem;margin:0}
.pstep p{grid-column:1/-1;grid-row:2;color:var(--ink-2);font-size:16px;line-height:1.5;margin-top:14px}
.proofrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,36px);margin-top:clamp(40px,5vw,58px)}
.proof{display:flex;align-items:flex-start;gap:11px;padding:18px 0 0;border:0;border-top:1px solid var(--line);background:none;font-size:16px;line-height:1.4;color:var(--ink);font-weight:600}
.proof .ic{flex-shrink:0;display:inline-flex;line-height:0;background:none;color:var(--acc);margin-top:1px}
.proof .tx{text-wrap:pretty}

/* ===== REALISATIONS ===== */
.filters{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.grid-proj{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,1.8vw,24px)}
/* Vue filtree : colonnes egales qui se repartissent la largeur, et les portees c4/c2/c33
   de la mosaique sont annulees. `auto-fit` fait le travail tout seul quel que soit le
   nombre de projets restants : trois villas font trois colonnes, deux residences en font
   deux, un chalet prend la ligne. Sans ca, une villa en span 4 restait seule sur les deux
   tiers de sa ligne et laissait un trou (retour Carlos du 08.09). */
.grid-proj.filtre{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-proj.filtre .pj{grid-column:auto}
.pj{display:block}
/* L'arrondi va aussi sur l'enveloppe : elle porte un fond (l.107) et coupe en overflow.
   A angle droit, ce fond se voyait en cadre derriere l'angle arrondi de la photo. 12.09. */
.pj .imgw{position:relative;overflow:hidden;border-radius:var(--ang) 0 0 0;height:clamp(220px,24vw,340px)}
.pj img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pj:hover img{transform:scale(1.06)}
/* Carte sans fiche (div.pj, projets ajoutes le 29.09) : pas de zoom ni de libelle qui s'allume, rien a cliquer. */
div.pj:hover .meta .ty{color:var(--ink-3)}
/* La photo zoome au survol comme les autres ; seul le sigle de la carte vide ne bouge pas. */
.pj:hover .imgw-vide img{transform:none}
/* Carte sans photo (projet dont on n'a pas encore l'image) : aplat bordeaux et sigle en filigrane. */
.pj .imgw-vide{background:var(--dark);display:flex;align-items:center;justify-content:center}
.pj .imgw-vide img{width:38%;height:auto;object-fit:contain;opacity:.22}
.pj .go{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:var(--acc);border:1px solid var(--acc);color:var(--on-dark);display:flex;align-items:center;justify-content:center;transition:background .2s}
.pj:hover .go{background:var(--acc);border-color:var(--acc);color:var(--on-dark)}
.pj .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 4px 2px}
/* La legende met la commune a gauche et le descriptif a droite. Sous ~460 px de carte,
   les deux ne tiennent plus sur une ligne et se coupent chacun au milieu d'un mot :
   « Martigny / (VS) » d'un cote, le descriptif sur deux lignes de l'autre. On mesure la
   CARTE et pas l'ecran, parce que la meme carte fait 760 px ou 368 px selon la place que
   la mosaique lui donne : une requete de media ne saurait pas les distinguer. */
.pj{container-type:inline-size}
@container (max-width:460px){
  .pj .meta{flex-direction:column;align-items:flex-start;gap:5px}
}
.pj .meta .loc{font-weight:650;font-size:1.125rem}
/* Les vignettes de l'accueil pointent sur la fiche du projet dans cette grille, par
   son ancre. Le cadre or dit lequel, sinon on arrive au milieu d'une grille sans
   savoir ce qu'on est venu voir. */
.grid-proj .pj[id]{scroll-margin-top:104px}
/* le cadre est sur .pj et pas sur .imgw : le clip-path de reveal de .imgw le mangerait */
.grid-proj .pj:target{outline:2px solid var(--acc);outline-offset:6px}
.pj .meta .ty{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.c4{grid-column:span 4}.c2{grid-column:span 2}.c3{grid-column:span 2}.c33{grid-column:span 3}
.proj-foot{margin-top:clamp(32px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* Fil d'Ariane des fiches. Il ne peut pas vivre DANS le hero : le surtitre y porte deja
   « Projet en cours · Corsier-sur-Vevey (VD) » et deux lignes de petit texte au-dessus
   du titre se disputent le meme role. Il ouvre donc la premiere section de contenu.
   14 px, le plancher de l'echelle, et --ink-3 : c'est un repere, pas une lecture. Le
   chevron est en ::after sur les elements sauf le dernier, jamais dans le HTML, sinon
   il se retrouve dans le texte copie et dans le fil lu par un lecteur d'ecran. */
.ariane{font-size:14px;color:var(--ink-3);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px}
.ariane a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.ariane a:hover{color:var(--acc-2)}
.ariane span:not(:last-child)::after,.ariane a::after{content:"›";margin-left:8px;color:var(--line)}
.ariane span:last-child{color:var(--ink-2)}
.shead .l .lead{color:var(--ink-2);font-size:16px;line-height:1.6;max-width:52ch;margin-top:16px}
/* Le chapo peut aussi vivre dans la colonne de droite du .shead, a cote du titre
   plutot que dessous : sur une section courte comme le formulaire de contact, le
   titre et son chapo tiennent alors sur la meme ligne d'horizon (retour Carlos 08.09). */
.shead .r{flex:1 1 320px;max-width:46ch}
.shead .r .lead{color:var(--ink-2);font-size:16px;line-height:1.6;margin:0}
.vband .vsub{color:rgba(255,255,255,.92);font-size:16px;line-height:1.6;max-width:52ch;margin:18px auto 0}
.vband .vin .btn{margin-top:26px}

/* ===== CE QUE NOUS RECHERCHONS ===== */
/* chaine d'images d'une fiche projet : les etats successifs du meme terrain */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
.ch img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
/* Un plan d'architecte n'est pas une photo : recadre en 4/3 il perd ses cotes et
   vient coller au bord de la carte. .plan le pose entier sur une feuille blanche,
   cadre carre pour tenir un plan portrait a cote d'une esquisse paysage. */
.ch.plan img{aspect-ratio:1/1;object-fit:contain;background:#fff;padding:clamp(14px,1.6vw,22px);border:1px solid var(--line)}
.ch figcaption{margin-top:14px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.ch figcaption b{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:560;font-variation-settings:"opsz" 24;letter-spacing:-.006em;color:var(--ink);margin-bottom:7px}
/* L'or ne vaut que pour un NUMERO en tete de legende, meme role d'index que les etapes.
   Sans la classe .seq il dorait la premiere lettre d'un mot, ce qui se lit comme une faute
   sur un nom propre (« Corbieres », « Blonay »). .seq marque les chaines numerotees. */
.chain.seq .ch figcaption b::first-letter{color:var(--acc-2)}
/* En deux colonnes la vignette fait le double de large et la legende devient un titre de
   projet, pas une legende de sequence : elle se cale sur .faq-card h3 et non sur les 17,9 px
   du 4-up, sinon le nom du projet passe pour du corps de texte. */
.chain.c2 .ch figcaption b{font-size:clamp(1.25rem,1.5vw,1.375rem);margin-bottom:10px}
@media(max-width:1000px){.chain{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.chain{grid-template-columns:1fr}}
/* page contact : numero mis en avant */
.callout{text-align:center;max-width:56ch;margin:0 auto}
.callout .eyebrow{justify-content:center;margin-bottom:20px;color:var(--on-dark-2)}
.bignum{display:inline-block;font-family:var(--serif);font-variation-settings:"opsz" 60;font-weight:500;
  font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-0.03em;color:var(--on-dark);line-height:1.05}
.bignum:hover{color:var(--acc-2)}
.callout p{margin-top:20px;color:var(--on-dark-2);font-size:16px}
.callout .todo{color:var(--acc);border-left-color:var(--acc)}
/* le formulaire hors hero n'a pas de photo derriere : la barre vitree devient opaque */
.formcol .bar{margin-top:0;max-width:none;background:var(--dark);border-color:var(--dark-line);
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* message direct de la page contact */
.formcol .btn{width:100%;margin-top:22px}
.calt{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:16px;color:var(--ink-2)}

.linkU{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.linkU:hover{color:var(--acc-2)}
.looks{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px)}
.looks.trois{grid-template-columns:repeat(3,1fr)}
/* Une grille de SIX cartes passe en trois colonnes : a quatre colonnes elle tombe en 4 + 2
   et la seconde rangee reste a moitie vide. Enferme dans une media query desktop a dessein :
   :has() pese plus lourd que .looks, la regle debordait sinon sur les 2 colonnes de tablette
   et la colonne unique du telephone, qui vivent plus bas dans ce fichier. 12.09 */
@media(min-width:981px){
  .looks:has(>.look:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
}
/* Les quatre cartes de « ce que nous recherchons » ont des titres inegaux : un mot sur
   une ligne, « Changement de plan d'affectation » sur deux, et les chapos partaient donc
   a quatre hauteurs differentes (retour Carlos 09.09). Chaque carte reprend les rangees
   de la grille parente, la rangee du titre est alors commune aux quatre et tous les
   chapos partent du meme trait. Reserve a la grille a quatre situations : ailleurs, une
   .look porte aussi une image et un bouton, qui ne rentreraient pas dans deux rangees. */
@supports (grid-template-rows:subgrid){
  #recherche .looks{grid-template-rows:auto auto}
  #recherche .look{grid-row:span 2;grid-template-rows:subgrid}
  /* .look centre ses elements dans leur rangee : sans cette ligne, un chapo de trois
     lignes se centrait dans la rangee dimensionnee par celui de quatre, et on retombait
     sur douze pixels d'ecart. L'icone et le titre, eux, restent centres ensemble. */
  #recherche .look>p{align-self:start}
}
.look{border-top:1px solid var(--line);padding-top:22px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:12px;align-items:center}
/* Carte qui descend vers sa section détaillée (situations de /expertise). Elle reste une
   carte d'information : seule une fleche au bout du titre dit qu'il y a la suite plus bas.
   Sans survol (ecran tactile), la fleche reste visible en discret. */
a.look{color:inherit;text-decoration:none}
a.look h3::after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:.35em;vertical-align:-.02em;
  background:currentColor;opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
a.look:hover h3,a.look:focus-visible h3{color:var(--acc-2)}
a.look:hover h3::after,a.look:focus-visible h3::after{opacity:1;transform:none}
@media(hover:none){a.look h3::after{opacity:.55;transform:none}}
/* ===== L'ANGLE DE MARQUE =====
   Le logo est un eventail d'arcs partant tous d'un meme point. Les photos le rappellent
   par un seul angle : le haut-gauche s'arrondit de 36 px et trois arcs dores suivent cet
   arrondi. Les trois autres angles restent vifs, l'image reste une image rectangulaire.

   Chaque arc est un quart d'ELLIPSE et non de cercle : il part d'un point du bord gauche
   et arrive sur un point du bord haut, et les deux distances different. C'est ce qui le
   fait pencher, donc les trois se croisent legerement au lieu d'etre trois paralleles qui
   retombent sur une cible de tir. L'ellipse plutot qu'une rotation parce qu'elle garde les
   deux bouts poses PILE sur les bords, alors qu'un arc de cercle tourne decolle des bords
   et flotte. Distances : 44/46, 58/54, 66/72.

   Les arcs sont DEHORS, dans l'encoche degagee par l'arrondi, donc sur ce qu'il y a
   derriere la photo. Tranche par Carlos le 12.09 sur planche de trois tracés : c'est bien
   ce placement-la, et pas les memes arcs ramenes sur la photo, ni des arcs concentriques
   niches le long de l'arrondi. Consequence assumee : a cote d'une photo posee sur du
   papier, les arcs se lisent sur le papier.

   Ce qui a ete RETIRE le 12.09 : les trois cordes sombres qui joignaient les deux bouts de
   chaque arc. Elles faisaient trop de dessin, et c'est elles qui donnaient l'impression de
   traits perdus sur le fond. Ne pas les remettre.

   Pourquoi une enveloppe (.vgw) : un <img> ne porte pas de pseudo-element, et les filets
   vivent dehors, dans le papier degage par l'arrondi. C'est aussi ce qui les rend visibles :
   un filet d'un pixel pose SUR une photo de chantier disparait dans la terre, verifie le
   09.09. Ici il n'est jamais sur la photo.

   Le dessin est un masque et non une image coloree : la couleur vient donc d'un jeton et
   suit le fond. Sur bordeaux l'or clair, sur papier l'or normal. */
.vgw,.ch,.pj .imgw,.split .media,.person .pic,.why-pic,.ctc .pic,.faq-card{position:relative}
.vgw{display:block;line-height:0}
.vgw>.vg{width:100%;height:100%;display:block;object-fit:cover}
.vgw>.vg,.ch>img,.pj .imgw>img,.split .media>img,.person .pic>img,.why-pic>img{border-radius:var(--ang) 0 0 0}
/* Ni .bg (les fonds de hero : plein cadre, l'arc s'y perdrait), ni .who2 img
   (un avatar rond de 52 px), ni les plans techniques. */
.vgw::after,.ch::after,.pj .imgw::after,.split .media::after,.person .pic::after,.why-pic::after,.ctc .pic::after,.faq-card::after{content:"";position:absolute;left:0;top:0;width:90px;height:90px;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:90px 90px;mask-size:90px 90px}
.vgw::after,.ch::after,.pj .imgw::after,.split .media::after,.person .pic::after,.why-pic::after,.ctc .pic::after,.faq-card::after{background-color:var(--acc);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2090%2090'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1'%3E%3Cpath%20d='M%200%2044%20A%2046%2044%200%200%201%2046%200'/%3E%3Cpath%20d='M%200%2058%20A%2054%2058%200%200%201%2054%200'/%3E%3Cpath%20d='M%200%2066%20A%2072%2066%200%200%201%2072%200'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2090%2090'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1'%3E%3Cpath%20d='M%200%2044%20A%2046%2044%200%200%201%2046%200'/%3E%3Cpath%20d='M%200%2058%20A%2054%2058%200%200%201%2054%200'/%3E%3Cpath%20d='M%200%2066%20A%2072%2066%200%200%201%2072%200'/%3E%3C/g%3E%3C/svg%3E")}
.dark .vgw::after,.dark .ch::after,.dark .split .media::after,#pourquoi-nous .look.on .vgw::after,#pourquoi-nous .look:focus-within .vgw::after{background-color:var(--acc-on-dark)}
/* Les plans d'architecte et les vues satellite ne sont pas des photos : angles vifs. */
.ch.plan>img{border-radius:0}
.ch.plan::after{content:none}
/* Sous 981px la carte de l'accueil passe sur fond blanc : l'or normal y revient. */
@media(max-width:980px){#pourquoi-nous .look.on .vgw::after{background-color:var(--acc)}}
.look .vgw,.look .more,.look>p{grid-column:1/-1}
.look .ic{color:var(--acc);line-height:0;display:inline-flex}
.look h3{font-size:1.375rem;margin:0}
.look p{color:var(--ink-2);font-size:16px;line-height:1.55}
.look .vgw{width:100%;aspect-ratio:4/3;margin:10px 0 0}
.look .more{display:grid;grid-template-rows:1fr}
.look .mi{overflow:hidden;min-height:0}
.look .more p{margin-bottom:18px}
.look .more .btn{margin-bottom:2px;height:48px;padding:0 18px;white-space:nowrap}

/* ===== ZONE D'INTERVENTION ===== */
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,2.4vw,34px)}
.zone{border-top:1px solid var(--line);padding-top:20px}
.zone h3{font-size:1.125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--acc-txt);margin-bottom:10px}
.zone p{color:var(--ink-2);font-size:16px;line-height:1.7}
/* Meme defaut que les quatre situations de #recherche (retour Carlos 13.09) : le titre
   « Une methode, pas une impression » tient sur deux lignes, les deux voisins sur une, et
   le paragraphe de gauche partait plus bas. Les trois cartes partagent les rangees de la
   grille, le paragraphe part du meme trait. Reserve au brevet : les .zones des pages
   legales portent plusieurs paragraphes par carte, un span 2 les casserait. */
@supports (grid-template-rows:subgrid){
  #brevet .zones{grid-template-rows:auto auto}
  #brevet .zone{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start}
}
.zone-note{margin-top:clamp(28px,3.4vw,44px);font-size:16px;color:var(--ink-2)}
/* Le bouton vit A COTE du paragraphe, jamais dedans : glisse dans le flux du texte,
   il se coince au milieu d'une phrase des que l'ecran est large. */
.zone-note>.btn{margin-top:16px}
.zone-note b{color:var(--ink)}

/* ===== FAQ ===== */
.faq{max-width:860px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 0;font-weight:650;font-size:1.125rem;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--acc-txt)}
.qa .sg{flex-shrink:0;width:20px;height:20px;position:relative;margin-top:3px}
.qa .sg::before,.qa .sg::after{content:"";position:absolute;background:var(--acc);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.qa .sg::before{top:9px;left:0;width:20px;height:2px}
.qa .sg::after{left:9px;top:0;width:2px;height:20px}
.qa[open] .sg::after{transform:rotate(90deg);opacity:0}
.qa .an{padding:0 0 24px;color:var(--ink-2);font-size:16px;line-height:1.65;max-width:64ch}
.faq-foot{margin-top:clamp(30px,3.6vw,44px);display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:16px;color:var(--ink-2)}

/* ===== FICHE PROJET ===== */
.pj .meta .ty{transition:color .2s}
.pj:hover .meta .ty{color:var(--acc-txt)}

/* ===== VIDEO BAND ===== */
.vband{position:relative;height:clamp(420px,58vw,680px);overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}
.vband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* la facade de Martigny est claire : a .5 le paragraphe blanc passait sous le seuil
   de lisibilite sur telephone, ou le texte se pose pile sur le mur eclaire */
.vband::after{content:"";position:absolute;inset:0;background:rgba(16,6,10,.6);z-index:1}
.vband .vin{position:relative;z-index:2;text-align:center;color:#fff;padding:0 20px}
.vband .eyebrow{color:#fff;justify-content:center;margin-bottom:20px}
.vband h2{color:#fff;font-size:clamp(2rem,5vw,4rem);max-width:16ch;margin:0 auto}
.playb{width:84px;height:84px;border-radius:50%;background:var(--acc);color:var(--on-dark);border:0;display:flex;align-items:center;justify-content:center;margin:0 auto 28px;box-shadow:0 0 0 0 rgba(176,138,70,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(176,138,70,.45)}70%{box-shadow:0 0 0 26px rgba(176,138,70,0)}100%{box-shadow:0 0 0 0 rgba(176,138,70,0)}}

/* ===== SPLIT ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
/* .rev inverse texte et image en bureau, pour ne pas empiler deux blocs photo-a-gauche
   de suite. En dessous de 980 la grille repasse en une colonne et l'ordre du DOM reprend
   la main, donc chaque bloc reste image puis texte et la page garde son rythme. */
@media(min-width:981px){.split.rev>.media{order:2}}
/* /vendre #rester : le texte est trois fois plus haut que la photo. Centree, elle flottait
   au milieu d'un grand vide ; collee en haut, elle se voit tout de suite et suit la lecture
   (Carlos 29.09). Meme top que .faq-card et .why-side, sous l'en-tete fixe. */
@media(min-width:981px){#rester .split{align-items:start}#rester .split .media{position:sticky;top:98px}}
/* meme principe pour les portraits : photo a droite au-dessus de 980 px, et sur mobile
   l'ordre du DOM reprend, donc photo puis texte comme sur le bloc voisin.
   Les proportions doivent suivre l'inversion, sinon la photo atterrit dans la colonne
   large et grossit de 35 % par rapport au portrait d'en face (Carlos, 24.08). */
@media(min-width:981px){
  .person.rev{grid-template-columns:1.15fr .85fr}
  .person.rev>.pic{order:2}
}
.split .media{position:relative;aspect-ratio:5/4;border-radius:var(--r);overflow:hidden}
.split .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .body .eyebrow{margin-bottom:16px}
.split .body h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:16px}
.split .body p{color:var(--ink-2);max-width:46ch;margin-bottom:14px}
.split .body .btn{margin-top:12px}
.split .body .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:12px}.split .body .acts .btn{margin-top:0}
.split .body .acts .tel{display:inline-flex;align-items:center;gap:12px;font-size:1.125rem;font-weight:700;color:var(--ink)}
.split .body .acts .tel .c{width:38px;height:38px;border-radius:50%;background:var(--acc);color:var(--on-dark);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}

/* ===== PERSON ===== */
.person{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px);align-items:center}
.person .pic{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden}
.person .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
/* la marque en filigrane sur le fond des sections portrait, comme les grands
   mots des autres sections : grande, fantome, inclinee, debordant du bord */
.section:has(>.wm-logo){overflow:hidden} /* permet de rogner la marque collee au coin */
.wm-logo{position:absolute;z-index:0;top:-9%;left:-6%;width:clamp(300px,38vw,540px);aspect-ratio:1;
  background:url('/media/logo-mark-dark.svg') center/contain no-repeat;
  opacity:.06;transform:rotate(-7deg);pointer-events:none}
.wm-logo+.wrap{position:relative;z-index:1} /* portrait 4/5 : garder le visage quand le cadre passe en 4/3 mobile */
/* Deux variantes, pour les deux endroits ou la section a du vide a combler. `.r` colle la
   marque au coin oppose, et l'inclinaison part dans l'autre sens pour que les deux ne
   soient pas la meme image posee deux fois. `.on-dark` prend le trace blanc : le trace
   bordeaux a 6 % ne se voit pas sur un fond bordeaux, il le salit seulement. */
.wm-logo.r{left:auto;right:-6%;transform:rotate(7deg)}
.wm-logo.on-dark{background-image:url('/media/logo-mark-light.svg');opacity:.05}
/* marqueur de contenu en attente d'une reponse du client, visible dans la maquette */
.todo{display:inline-block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--acc-2);border-left:3px solid var(--acc);padding:5px 0 5px 12px;margin-top:6px;line-height:1.4}
.person .pic .tag{position:absolute;left:14px;bottom:14px;background:var(--paper);color:var(--ink-3);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:0}
.person .who .eyebrow{margin-bottom:16px}
.person .who h2{font-size:clamp(1.7rem,3vw,2.4rem)}
/* En capitales et en or, la fonction devenait le jumeau du surtitre juste au-dessus,
   qui est or lui aussi depuis le 25.08. Elle repasse en casse normale : c'est une
   information qu'on lit, pas une etiquette. (--acc-2 tombait a 3,7:1 sur fond clair.) */
.person .who .role{color:var(--ink);font-size:16px;letter-spacing:0;font-weight:600;margin:10px 0 22px}
.person .who p{color:var(--ink-2);max-width:48ch;margin-bottom:16px}
/* Les quatre points de differenciation de Barbara. Une liste, pas des cartes : c'est
   une lecture qui suit le paragraphe, le marqueur or remplace la puce du navigateur. */
.person .who .who-pts,.split .body .who-pts{list-style:none;margin:0 0 20px;padding:0;max-width:48ch;display:grid;gap:11px}
.person .who .who-pts li,.split .body .who-pts li{position:relative;padding-left:20px;color:var(--ink-2);font-size:16px;line-height:1.55}
.person .who .who-pts li::before,.split .body .who-pts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.person .who .who-pts b{color:var(--ink);font-weight:600}
.person .dl{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
/* Les coordonnees sous la photo, et non plus au bout de la colonne de texte. La bio
   reecrite par Barbara ajoute quatre points a des paragraphes deja longs : trois liens
   de plus au bout faisaient une colonne droite interminable pendant que la gauche
   s'arretait a mi-hauteur. Meme partage que la page contact, ou .ctc fait deja ca. */
.person .pcol .dl{flex-direction:column;flex-wrap:nowrap;gap:14px}
.person .pcol .pcta{margin-top:24px}
.person .dl a{font-weight:600;display:flex;align-items:center;gap:10px}
.person .dl .c{width:38px;height:38px;border-radius:50%;background:var(--band);display:flex;align-items:center;justify-content:center;color:var(--ink)}

/* ===== TESTIMONIAL (dark) ===== */
.testi{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(32px,5vw,72px);align-items:center}
.testi .rate .big{font-size:clamp(3rem,6vw,5rem);font-weight:750;letter-spacing:-0.04em;line-height:1}
.testi .rate .big span{color:var(--acc)}
.testi .stars{display:flex;gap:4px;margin:16px 0 12px;color:var(--acc)}
.testi .rate .sub{color:var(--on-dark-2);font-size:16px}
.testi .q blockquote{font-size:clamp(1.375rem,2.8vw,2.125rem);font-weight:600;color:var(--on-dark);letter-spacing:-0.02em;line-height:1.3}
.testi .foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px;flex-wrap:wrap}
.testi .who2{display:flex;align-items:center;gap:14px}
.testi .who2 img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.testi .who2 .nm{font-weight:650;color:var(--on-dark)}
.testi .who2 .rl{font-size:16px;color:var(--on-dark-2)}
.testi .navb{display:flex;gap:10px}
.testi .navb button{width:50px;height:50px;border-radius:50%;border:1px solid var(--dark-line);background:transparent;color:var(--on-dark);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s}
.testi .navb button:hover{background:var(--acc);color:var(--on-dark);border-color:var(--acc)}
.testi .tagx{display:inline-block;margin-top:22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);border:1px solid var(--dark-line);border-radius:0;padding:5px 12px}

/* ===== FINAL ===== */
.final{position:relative;overflow:hidden;isolation:isolate;text-align:center}
.final .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.final::after{content:"";position:absolute;inset:0;background:rgba(16,6,10,.66);z-index:1}
.final .wm{top:auto;bottom:4%;left:-5vw;z-index:1;color:rgba(255,255,255,.075);-webkit-text-stroke-color:rgba(255,255,255,.17)}
.final .in{position:relative;z-index:2;max-width:60ch;margin:0 auto;padding:clamp(80px,11vw,150px) 0}
.final .eyebrow{color:#fff;justify-content:center;margin-bottom:18px}
.final h2{color:#fff;font-size:clamp(2rem,4.6vw,3.5rem)}
.final p{color:rgba(255,255,255,.85);margin:18px auto 34px;max-width:44ch}
.final .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===== FOOTER ===== */
.ft{background:var(--dark);color:var(--on-dark-2);padding:clamp(56px,7vw,90px) 0 38px}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid var(--dark-line)}
.ft .logo .tx{color:var(--on-dark)}
.ft-brand p{margin-top:16px;font-size:16px;max-width:32ch;line-height:1.6}
/* Libelles de colonne, et pas des <h4> : ce sont des intitules de navigation, pas des
   sections du document. En <h4> ils creaient un saut h2 → h4 sur six pages, le pied de
   page suivant un contenu qui s'arrete en h2. display:block explicite pour que la regle
   ne depende pas de .ft-col span juste en dessous. */
.ft-col .ft-h{display:block;font-size:16px;text-transform:uppercase;letter-spacing:.14em;color:var(--acc-on-dark);margin-bottom:16px;font-weight:600}
.ft-col a,.ft-col span{display:block;font-size:16px;margin-bottom:10px;color:var(--on-dark-2)}
.ft-col a:hover{color:var(--on-dark)}
.ft-bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:24px;font-size:14px;color:var(--on-dark-2)}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
/* ===== VOIX D'AFFICHAGE (suit les titres) ===== */
.stats .n,.pstep .bd,.wm,.testi .rate .sc{font-family:var(--serif);
  font-variation-settings:"opsz" 60}
.zone h3{font-family:var(--roman);font-weight:600;letter-spacing:.12em}

/* ===== ANIMATIONS D'AFFICHAGE ===== */
/* cascade : le parent sert de conteneur, ce sont les enfants qui defilent */
.rv.stg{opacity:1;transform:none}
.rv.stg>*:nth-child(1){--sd:0ms}.rv.stg>*:nth-child(2){--sd:80ms}.rv.stg>*:nth-child(3){--sd:160ms}.rv.stg>*:nth-child(4){--sd:240ms}.rv.stg>*:nth-child(5){--sd:320ms}.rv.stg>*:nth-child(6){--sd:400ms}.rv.stg>*:nth-child(7){--sd:480ms}.rv.stg>*:nth-child(8){--sd:560ms}
.rv.stg:not(.wp)>*{opacity:0;transform:translateY(16px);
  transition-property:opacity,transform;transition-duration:.7s;
  transition-timing-function:var(--ease);transition-delay:var(--sd,0ms)}
.rv.stg:not(.wp).in>*{opacity:1;transform:none}

/* volet glissant : chaque vignette se decouvre quand ELLE entre a l'ecran */
.pj .imgw{clip-path:inset(0 0 100% 0);
  transition:clip-path 1s var(--ease);transition-delay:var(--pd,0ms)}
.pj .meta{opacity:0;transform:translateY(10px);
  transition-property:opacity,transform;transition-duration:.6s;
  transition-timing-function:var(--ease);
  transition-delay:calc(var(--pd,0ms) + 240ms)}
.pj:nth-child(even){--pd:110ms}
/* pendant le rejeu d'un filtre, la fermeture est instantanee : voir rejouerVignettes() */
.pj.rvj .imgw,.pj.rvj .meta{transition:none}
.pj.in.imgok .imgw{clip-path:inset(0 0 0 0)}
.pj.in .meta{opacity:1;transform:none}

/* image seule devoilee par volet */
.rv.wipe{opacity:1;transform:none}
/* Le cadre (fond + ombre) ne doit pas exister avant que le volet parte : sinon on voit
   une boite vide ombree pendant tout le defilement (Carlos, 24.08). armIn() ne pose .in
   qu'une fois la photo chargee, donc masquer jusque-la ne retarde rien de visible. */
/* Tant que la photo n'est pas chargee, sa boite n'a ni ombre ni fond : rien a voir,
   donc rien de moche. Le volet et le rythme des apparitions sont inchanges. */
.imgbox-wait{box-shadow:none!important;background:none!important}
.imgbox-wait img,img.imgbox-wait{opacity:0}
/* images sans volet : fondu a l'arrivee plutot qu'apparition seche */
.vg,.ch img,.gal img,.faq-card img{transition:opacity .5s var(--ease)}
.rv.wipe img{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)}
.rv.wipe.in.imgok img{clip-path:inset(0 0 0 0)}

/* titres ligne par ligne */
.lsplit .ln{display:block;overflow:hidden}
.lsplit .ln>i{display:block;font-style:normal;transform:translateY(108%);
  transition:transform .9s var(--ease);transition-delay:var(--ld,0ms)}
.lsplit.lgo .ln>i{transform:none}

/* parallaxe */
[data-px]{will-change:transform}
.vband img{height:132%;top:-16%}

/* header escamotable au scroll descendant */


/* Tablette, deux colonnes : nombre impair de projets, la derniere carte prend la ligne au lieu de laisser un trou. */
@media(min-width:641px) and (max-width:1000px){.grid-proj:not(.filtre) .pj:last-child:nth-child(odd){grid-column:span 2}}
@media(max-width:1000px){
  .grid-proj{grid-template-columns:repeat(2,1fr)}.c4,.c2,.c3,.c33{grid-column:span 1}
  .mani-grid,.split,.person,.testi{grid-template-columns:1fr;gap:32px}
  .looks{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr;gap:20px 0}.proofrow{grid-template-columns:1fr 1fr}
  .st:nth-child(odd){border-left:0;padding-left:0}.st{padding:4px 22px}
  .ft-top{grid-template-columns:1fr 1fr;gap:28px}
  .why{grid-template-columns:1fr;grid-template-areas:"head" "list" "foot"}
  .why-side{display:contents;position:static}
  .why-head{grid-area:head}.why-list{grid-area:list}.why-foot{grid-area:foot}
  .why-list{margin-top:30px}
  .why-pic{aspect-ratio:16/10}
  .why-cta{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px 26px}
  .pills,.filters{gap:10px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding:0 20px 2px}
  .pills::-webkit-scrollbar,.filters::-webkit-scrollbar{display:none}
  .pill{white-space:nowrap;padding:13px 14px;border:1px solid var(--line);border-bottom-width:1px;font-size:14px}
  .pill.on{color:var(--on-dark);background:var(--acc);border-color:var(--acc)}
}
/* La nav a 16 px ne tient plus sous cette largeur, bascule sur le tiroir burger.
   Seuil remonte de 1160 a 1280 le 29.08 avec l'arrivee de « Estimation » : a six
   entrees, le bouton « Faire estimer mon bien » sortait du conteneur entre 1180 et
   1260 px, mesure a 88 px de debordement a 1180. Sous 1160 le burger prenait deja le
   relais, la casse ne se voyait donc que dans cette bande la. */
@media(max-width:1280px){.nav{display:none}.burger{display:inline-flex}}
@media(max-width:640px){
  .nav{display:none}.burger{display:inline-flex}.hd .cta{display:none}
  .steps{grid-template-columns:1fr}
  .bar{flex-direction:column}.bar button{padding:15px}.step2 .g2{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.cx *{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.rv.stg>*,.pj .meta{opacity:1!important;transform:none!important}.pj .imgw,.rv.wipe img{clip-path:none!important}.imgbox-wait img,img.imgbox-wait{opacity:1!important}.lsplit .ln>i{transform:none!important}[data-px]{translate:none!important;transform:none!important}.hero .bg{animation:none}.playb{animation:none}}
/* ===== TIROIR MOBILE =====
   Le panneau ne glissait plus en bloc depuis le haut de l'ecran : tout arrivait deja
   forme, et un second bandeau venait recouvrir l'en-tete, logo qui saute compris.
   Ici le papier se DEROULE sous l'en-tete reste en place (clip-path), puis les entrees
   montent l'une apres l'autre. C'est le vocabulaire deja en place ailleurs sur le site,
   les photos en volet (.rv.wipe) et les titres ligne a ligne : une seule grammaire.
   Le tiroir part sous la barre, il n'a donc pas a la redessiner.
   Fermeture nettement plus courte que l'ouverture : on ne fait pas attendre pour sortir. */
.mm{position:fixed;top:var(--hdh);left:0;right:0;bottom:0;z-index:120;background:var(--paper);
  display:flex;flex-direction:column;padding:14px clamp(22px,5vw,64px) 22px;
  clip-path:inset(0 0 100% 0);transition:clip-path .26s var(--ease)}
.mm.on{clip-path:inset(0 0 0 0);transition:clip-path .58s var(--ease)}
/* Le telephone suit le bouton (plus de margin-top:auto qui le collait au bas de l'ecran), et
   le bas du volet porte la marque en filigrane, meme geste que .wm-logo sur les sections
   (Carlos 17.09). */
.mm{overflow:hidden}
.mm::after{content:"";position:absolute;z-index:0;right:-12%;bottom:-16%;width:min(66vw,300px);aspect-ratio:1;
  background:url('/media/logo-mark-dark.svg') center/contain no-repeat;opacity:.05;transform:rotate(-7deg);pointer-events:none}
.mm>*{position:relative;z-index:1}
/* Entre le seuil du burger (1280) et le telephone, on est sur un ORDINATEUR a petit ecran :
   un tiroir plein cadre y est un geste de telephone, il masque toute la page pour six
   entrees. Au-dessus de 700 px il devient donc un panneau ancre a droite. Le volet en
   clip-path est neutralise ici au profit d'une translation, sinon il rognerait l'ombre
   portee qui detache le panneau de la page. 12.09 */
@media(min-width:701px){
  .mm{left:auto;width:min(420px,58vw);clip-path:none;transform:translateX(104%);
      transition:transform .5s var(--ease);border-left:1px solid var(--line);
      box-shadow:-20px 0 60px -30px rgba(56,21,30,.55)}
  .mm.on{clip-path:none;transform:none;transition:transform .5s var(--ease)}
  .mm nav a{font-size:1.5rem}
}
.mm nav{display:flex;flex-direction:column}
.mm nav a{font-size:1.875rem;font-weight:650;letter-spacing:-0.02em;padding:14px 0;border-bottom:1px solid var(--line)}
/* Dans le tiroir il n'y a pas de survol : la fourche s'affiche a plat, indentee sous son
   entree. Le tiroir clone le header, c'est donc le meme balisage des deux cotes. */
.mm nav .nav-item{display:flex;flex-direction:column;position:relative}
.mm nav .nav-item>a::after{display:none}
/* Repli en grid-template-rows 0fr -> 1fr, la meme mecanique que les cartes de l'accueil :
   elle s'anime, contrairement a display:none, et ne demande aucune hauteur en dur. */
.mm nav .sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease);position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0}
.mm nav .nav-item.on .sub{grid-template-rows:1fr}
.mm nav .subin{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.mm nav .sub a{font-size:1.125rem;font-weight:600;letter-spacing:0;padding:11px 0 11px 18px;color:var(--ink-2)}
.mm nav .sub a:last-child{border-bottom:1px solid var(--line)}
/* La fleche : seule zone qui deplie. 48 px de cible, posee sur la ligne du libelle. */
.mm-exp{position:absolute;top:0;right:0;width:48px;height:62px;border:0;background:transparent;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mm-exp::after{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
.mm nav .nav-item.on .mm-exp::after{transform:rotate(225deg) translate(-2px,-2px)}
.mm nav .cta{margin-top:24px;height:56px;justify-content:center;background:var(--acc);color:var(--on-dark);font-size:16px;font-weight:650;border-bottom:0;letter-spacing:0;padding:0 22px;display:inline-flex;align-items:center;gap:8px}
.mm-call{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--ink);font-size:20px;font-weight:700;padding:18px 0}
.mm-call .c{width:48px;height:48px;border-radius:50%;background:var(--acc);color:var(--on-dark);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
/* les entrees suivent le papier, jamais l'inverse : le premier lien part quand le volet
   a deja couvert un tiers de l'ecran, sinon on lit du texte sur du vide */
.mm nav a,.mm-call{opacity:0;transform:translateY(16px);transition:opacity .14s ease,transform .14s ease}
.mm.on nav a,.mm.on .mm-call{opacity:1;transform:none;
  transition:opacity .4s var(--ease) var(--d,0s),transform .48s var(--ease) var(--d,0s)}
/* Les delais visent les ENFANTS DIRECTS du nav et non « a:nth-child » : depuis le
   deroulant, la premiere entree est un <span class="nav-item">, et un selecteur sur a
   decalait toute la cascade d'une marche. 12.09 */
.mm nav>:nth-child(1){--d:.1s}
.mm nav>:nth-child(2){--d:.15s}
.mm nav>:nth-child(3){--d:.2s}
.mm nav>:nth-child(4){--d:.25s}
.mm nav>:nth-child(5){--d:.3s}
.mm nav>:nth-child(6){--d:.36s}
.mm nav>:nth-child(7){--d:.41s}
.mm-call{--d:.41s}

/* entre 641 et 1000, la colonne de texte prend presque toute la largeur : plus de
   zone libre a droite pour le filigrane du hero, il repasserait sous le texte. */
@media(min-width:641px) and (max-width:1000px){.hero .wm{display:none}}

/* ===== MOBILE REFINEMENTS ===== */
@media(max-width:640px){
  .section{padding:64px 0}
  .wrap{padding:0 24px}
  .hero::before{background:linear-gradient(180deg,rgba(22,8,12,.5) 0%,rgba(22,8,12,.22) 40%,rgba(22,8,12,.7) 100%)}
  .wm{font-size:clamp(3.4rem,24vw,8rem);-webkit-text-stroke-width:1px}
  .mani .wm{bottom:18px;right:-8vw}
  .hero .wm{bottom:10vw;left:auto;right:-8vw;font-size:clamp(3.4rem,24vw,8rem)}
  :root{--hdh:64px}
  .hd .row{gap:12px}
  .mm{padding-left:24px;padding-right:24px}  /* aligne les entrees sur le logo (.wrap) */
  .brand-logo{width:141px;height:42px}
  .callpill .c{width:40px;height:40px}
  .hero{min-height:min(100svh,780px)}
  .hero-in{padding-top:96px;padding-bottom:36px}
  .hero h1{font-size:2.125rem;max-width:none}
  .hero h1.hh .ht{max-width:none}
  .hero .sub{font-size:1rem;margin-top:14px;max-width:none}
  .bar{margin-top:26px;padding:6px;gap:6px}
  .bar .fw{padding:10px 12px}
  .bar button{height:52px;justify-content:center}
  .htrust{gap:6px 16px;margin-top:16px}
  .htrust li{font-size:16px}
  .step2{padding:16px}
  /* stats en liste : une rangee chiffre+libelle par fait, filets entre les rangees */
  .stats{grid-template-columns:1fr;gap:0}
  .st{padding:13px 0;border-left:0;border-top:1px solid var(--dark-line)}
  .st:first-child{border-top:0;padding-top:0}
  .st:last-child{padding-bottom:0}
  .st .n{font-size:1.75rem;min-width:4.6ch;text-align:right} /* colonne commune, chiffres cales a droite : sinon « 3 » et « 2014 » commencent au meme point et finissent trois caracteres plus loin */
  .st .k{font-size:16px;margin-top:0}
  /* heads + type */
  .shead{margin-bottom:30px;gap:18px}
  .shead h2,.why-head h2,.split .body h2,.person .who h2{font-size:1.625rem;max-width:none}
  .shead .l .lead,.vband .vsub{font-size:16px;max-width:none}
  .mani .big{font-size:1.875rem;max-width:none}
  .mani .txt{max-width:none}
  /* showcase */
  .pills,.filters{gap:8px;margin:0 -24px;padding:0 24px 2px}
  .pill{padding:13px 13px;font-size:14px}
  .why-pic{aspect-ratio:4/3}
  .why-cta{flex-direction:column;align-items:stretch;gap:16px}
  .why-cta .btn{justify-content:center}
  .why-cta .linkU{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
  /* process */
  .steps{gap:28px}
  .pstep{column-gap:14px;padding-top:18px}
  .pstep .bd{font-size:1.5rem}
  .pstep h3,.look h3{font-size:1.25rem}
  .looks,.looks.trois{grid-template-columns:1fr} /* .trois est plus specifique, sans lui les trois cartes restaient cote a cote */
  .qa summary{font-size:1rem;padding:18px 0}
  .zone p{font-size:16px}
  .proofrow{grid-template-columns:1fr;gap:10px;margin-top:32px}
  .proof{padding:14px 0 0}
  /* realisations */
  .grid-proj{grid-template-columns:1fr;gap:22px}
  .pj .meta{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0 0}
  /* video */
  .vband{height:auto;min-height:360px;padding:54px 0}
  .vband h2{font-size:1.875rem;max-width:none}
  .playb{width:64px;height:64px;margin-bottom:20px}
  /* split / person */
  .split .media{aspect-ratio:4/3}
  .split .body p,.person .who p{max-width:none}
  .person .pic{aspect-ratio:4/3}
  /* En une seule colonne, la photo suivie des coordonnees mettrait le telephone avant
     meme le nom de Barbara. `display:contents` rend .pic et .dl a la grille, qui les
     remet dans l'ordre de lecture : photo, texte, coordonnees. */
  .person .pcol{display:contents}
  .person .pic{order:1}
  .person .who{order:2}
  .person .pcol .dl{order:3;flex-direction:row;flex-wrap:wrap;gap:12px 20px;margin-top:0}
  .person .pcol .pcta{order:4;margin-top:4px} /* le bouton reste apres les coordonnees, .pcol etant en display:contents */ /* le gap de la grille suffit, 22 px de plus faisaient un trou */
  .person .dl{gap:12px 20px}
  /* testimonial */
  .testi{gap:26px}
  .testi .q blockquote{font-size:1.25rem}
  .testi .stars{margin:12px 0 8px}
  .testi .foot{margin-top:22px;gap:16px}
  .testi .navb button{width:44px;height:44px}
  /* final */
  .final .in{padding:72px 0}
  .final h2{font-size:2rem}
  .final .row{flex-direction:column;align-items:stretch}
  .final .row .btn{width:100%}
  /* footer */
  .ft{padding:52px 0 30px}
  .ft-top{gap:26px;padding-bottom:30px}
  .ft-brand p{max-width:none}
}


/* ============================================================
   BLOCS ILLUSTRES
   Ajoutes pour sortir les sections de process, de FAQ et de zone
   du tout-texte. Aucune regle ci-dessous ne redefinit un selecteur
   existant, sauf .look .ic et .chain, signales sur place.
   ============================================================ */

/* --- process illustre : une vignette au-dessus de chaque etape ---
   Modificateur de .steps, la version nue reste valable telle quelle. */
.steps.illus .pstep{border-top:0;padding-top:0;align-items:center;align-content:start} /* align-content:start : la grille etire chaque etape a la hauteur de la plus haute, sans lui l'espace en trop se repartissait entre les rangees et l'image et le titre des etapes courtes descendaient (retour Carlos 04.09) */
.steps.illus .pstep .vgw{grid-column:1/-1;grid-row:1;width:100%;aspect-ratio:4/3;margin-bottom:20px;background:var(--band)}
.steps.illus .pstep .bd{grid-row:2}
.steps.illus .pstep h3{grid-row:2}
.steps.illus .pstep p{grid-row:3;margin-top:10px}
.dark .steps.illus .pstep .vgw{background:var(--dark-2)}

/* --- FAQ en deux colonnes, avec carte de rappel collante ---
   La colonne de droite du .shead etait vide sur toutes les sections de FAQ. */
.faqx{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.faqx .faq{max-width:none}
/* Le titre de la section entre dans la colonne de gauche, sinon la carte demarrait
   sous lui et laissait un vide en haut a droite. Elle part maintenant du titre. */
.faqx .faq-col{min-width:0}
/* L'image est collee en haut de la carte : le coin de la carte EST le coin de la photo,
   l'arrondi va donc sur la carte, qui coupe en overflow. Les arcs tombent dans l'encoche,
   c'est-a-dire sur le fond plein de la carte. 12.09 */
/* overflow:visible et non hidden : l'ornement d'angle (::after) deborde dans l'encoche,
   comme sur les photos ; avec overflow:hidden l'arrondi le tronquait en traits decales
   (retour Carlos 17.09, page estimation). L'image est arrondie par elle-meme. */
.faq-card{position:sticky;top:98px;border:1px solid var(--line);background:var(--paper);border-radius:var(--ang) 0 0 0}
.faq-card>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 20%;border-radius:calc(var(--ang) - 1px) 0 0 0;display:block}
/* Variante sans image. La specificite (0,2,0) bat le passage en grille deux colonnes
   des media queries, sinon le texte se tasserait dans la premiere colonne. */
.faq-card.nopic{display:block}
.faq-card .in{padding:clamp(22px,2.4vw,30px)}
.faq-card .eyebrow{margin-bottom:14px}
.faq-card h3{font-size:1.25rem;margin-bottom:12px}
.faq-card p{color:var(--ink-2);font-size:16px;line-height:1.6}
.faq-card .fc-tel{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:1.125rem;font-weight:700;color:var(--ink)}
.faq-card .fc-tel .c{width:38px;height:38px;border-radius:50%;background:var(--acc);color:var(--on-dark);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.faq-card .btn{width:100%;margin-top:16px}
/* .fc-tel prend toute la largeur de la carte et porte le filet de separation : on centre
   son contenu, pas sa boite (qui retrecirait le filet). Centre partout depuis le 29.09. */
.dark .faq-card{background:var(--dark-2);border-color:var(--dark-line)}
.dark .faq-card p{color:var(--on-dark-2)}
.dark .faq-card .fc-tel{color:var(--on-dark);border-top-color:var(--dark-line)}

/* --- page contact : qui repond a gauche, le formulaire a droite ---
   Ce bloc empruntait .person, dont la colonne photo est centree sur la hauteur de la
   colonne voisine. Avec un formulaire complet en face, la photo se retrouvait au milieu
   de 500 px de vide et la moitie droite du titre restait blanche. Ici les deux colonnes
   demarrent au meme endroit : a gauche la photo, le nom et les coordonnees, a droite le
   formulaire seul. Les coordonnees passent en colonne, la ou .person les met en ligne :
   dans 430 px de large, quatre entrees dont une adresse ne tiennent pas sur une ligne. */
.ctc{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,72px);align-items:start}
/* 1/1 et pas 4/5 : en 4/5 la colonne de gauche depassait le formulaire de 340 px et
   laissait un vide en bas a droite. Le carre ramene l'ecart a ~230 px. */
/* L'enveloppe coupe en overflow, donc l'arrondi pose ici suffit a arrondir la photo. 12.09 */
.ctc .pic{position:relative;aspect-ratio:1/1;overflow:hidden;box-shadow:var(--sh-img);border-radius:var(--ang) 0 0 0}
/* Le relief que --sh-img promet n'etait pose que sur les cartes et sur le portrait de la
   page contact : les grandes images de contenu restaient a plat, et le site perdait le
   volume que le reste de la maquette annonce. .imgbox-wait retire l'ombre tant que la
   photo n'est pas chargee, il n'y a donc jamais de boite vide ombree pendant le
   defilement, ce qui etait la raison d'etre du mecanisme. */
/* L'arrondi est repete sur l'ENVELOPPE, pas seulement sur l'image : l'ombre est portee par
   l'enveloppe, et une enveloppe a angle droit dessine un coin carre qui depasse derriere
   l'arrondi de la photo. Visible surtout sur un fond clair. Corrige le 12.09. */
.split .media,.person .pic,.steps.illus .pstep .vgw{box-shadow:var(--sh-img);border-radius:var(--ang) 0 0 0}
.split .media.rv.wipe{box-shadow:none;transition:box-shadow .4s} /* l'ombre attend la fin du volet (1.05 s) : pendant qu'il descend, le cadre vide sous l'image se lisait comme une boite ombree (retour Carlos 04.09) */
.split .media.rv.wipe.in.imgok{box-shadow:var(--sh-img);transition-delay:1s}
.ctc .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.ctc .role{color:var(--ink);font-size:16px;font-weight:600;margin:22px 0 12px}
.ctc-id>p{color:var(--ink-2);margin-bottom:0}
/* Les coordonnees ne tiennent plus dans la colonne de la photo : elles passent sous
   les deux colonnes, les quatre entrees reparties sur toute la largeur (retour Carlos
   08.09). Le formulaire est donc place explicitement en ligne 1, sinon la grille
   pousserait .dl dans sa case et le formulaire a la ligne suivante. */
/* Le formulaire prend le meme cartouche que le questionnaire de /estimer : fond papier,
   filet et ombre. Pose a nu sur la bande beige, les champs blancs flottaient sans bord
   commun (retour Carlos 08.09). */
.ctc-form form{background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-img);padding:clamp(20px,3.2vw,30px)}
.ctc>.ctc-form{grid-column:2;grid-row:1}
.ctc>.dl{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 28px;margin-top:clamp(26px,3.2vw,42px);padding-top:clamp(24px,2.8vw,34px);border-top:1px solid var(--line)}
.ctc .dl a,.ctc .dl .adr{font-weight:600;display:flex;align-items:center;gap:12px}
.ctc .dl .c{width:38px;height:38px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--ink);flex:0 0 auto}
.ctc .dl a:hover .c{background:var(--acc);color:var(--on-dark)}
@media(max-width:980px){
  /* Ordre voulu sur telephone : le titre, la photo, qui repond, comment les joindre,
     puis le formulaire. Les coordonnees repassent en ligne, la largeur revient. */
  .ctc{grid-template-columns:1fr;gap:34px}
  .ctc>.ctc-form{grid-column:1;grid-row:auto}
  /* la grille .ctc apporte deja 34px au-dessus du filet : la marge de la version
     large s'y ajoutait et laissait un vide de 60px au-dessus, contre 25px en dessous.
     Le filet et les icones remontent, l'air est le meme des deux cotes (retour Carlos 08.09). */
  .ctc>.dl{justify-content:flex-start;gap:14px 26px;margin-top:0;padding-top:28px}
  .ctc .pic{aspect-ratio:4/3}
}

/* --- carte du territoire ---
   Le SVG vient de _src/partials/carte-romandie.html, il porte .zmap-fig. */
/* 1.4/0.6 et pas 1.25/0.75 : sous 690px de colonne le SVG bascule sur son jeu
   de libelles mobile, et 1.25fr ne donnait que 677px a 1440px de fenetre. */
.zmap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(30px,4vw,68px);align-items:center}
/* la legende dessinee dans le SVG ferait doublon avec .zmap-legend en colonne */
.zmap-key{display:none}
/* le trace vient de donnees OSM reelles : rive du Leman, cours du Rhone et
   limites cantonales VD/VS/FR. Le SVG porte deux jeux de libelles, le jeu
   mobile est masque par attribut de presentation et reveille ci-dessous.
   Bascule en container query et pas en media query : dans une colonne etroite
   sur grand ecran, une media query laisserait les libelles desktop tomber a 6 px. */
.zmap-fig{position:relative;container-type:inline-size}
.zmap-svg{display:block;width:100%;height:auto}
@container (max-width:690px){
  .zmap-lbl,.zmap-anchor,.zmap-key,.zmap-zone-d{display:none}
  .zmap-zone-m{display:block}
  .zmap-zone{font-size:46px;letter-spacing:3.5px}
  .zmap-dot{r:11.5px}
  .zmap-hq{r:24px;stroke-width:3.4}
  .zmap-lake{stroke-width:3}
  .zmap-riv{stroke-width:4.4}
  .zmap-land{stroke-width:2.6}
}
.zmap-side .zone{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.zmap-side .zone:first-child{margin-top:0}
.zmap-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.zmap-legend span{display:inline-flex;align-items:center;gap:9px}
.zmap-legend i{width:11px;height:11px;border-radius:50%;background:var(--acc);flex:0 0 auto}
.zmap-legend i.seat{background:var(--acc);outline:1.8px solid color-mix(in srgb,var(--acc) 55%,transparent);outline-offset:3px;margin-right:4px}

/* --- galerie de promotion : bande de vignettes sous un .split --- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);margin-top:clamp(16px,2vw,22px)}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);transition:transform .6s var(--ease)}
.gal a{display:block;overflow:hidden;border-radius:var(--r)}
.gal a:hover img{transform:scale(1.05)}

/* --- .chain : la bande "les N etats du meme terrain" ---
   Existait deja en 4 colonnes figees, sans regle mobile : a 390 px les quatre
   vignettes tombaient a 80 px de large. La variante c3 sert aux sequences
   avant / pendant / apres. */
.chain.c3{grid-template-columns:repeat(3,1fr)}
.chain.c2{grid-template-columns:repeat(2,1fr)}
.chain .ch .num{display:block;font-family:var(--roman);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-txt);margin-bottom:6px}

/* --- tableau des chemins de sortie ---
   Le vendeur ne compare pas Cimmeco a d'autres promoteurs, il compare quatre
   facons de sortir de son bien. La colonne .us est la notre. La derniere ligne
   dit ou l'on est moins bon : sans elle le tableau ne serait pas credible. */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(30px,4vw,44px)}
.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:16px}
.cmp th,.cmp td{text-align:left;padding:15px 18px;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--roman);font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom-color:var(--ink);padding-bottom:12px}
.cmp tbody th{font-weight:650;color:var(--ink);width:23%}
.cmp td{color:var(--ink-2);line-height:1.45}
/* La colonne Cimmeco portait un simple aplat a 11 %, sur une section elle-meme deja
   teintee : Barbara la trouvait plate sans savoir pourquoi (retour du 07.09). Un aplat
   seul ne fait pas une colonne, il fait des cellules qui se trouvent avoir la meme
   couleur. Ce qui la designe, c'est son cadre : deux bords continus du haut au bas du
   tableau, et un en-tete plein qui la coiffe. */
.cmp .us{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--ink);font-weight:600;
  border-left:2px solid var(--acc);border-right:2px solid var(--acc)}
.cmp thead .us{background:var(--acc);color:var(--on-acc);font-weight:700;font-family:var(--sans);
  font-size:16px;letter-spacing:.06em;border-bottom-color:var(--acc)}
.cmp tbody tr:last-child .us{border-bottom:2px solid var(--acc)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp .franc th{color:var(--ink-3);font-weight:600}
.cmp .franc td{color:var(--ink-3)}
.cmp .franc .us{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink-2);font-weight:600}
/* Sous 820 px le tableau deborde et defile. Sans colonne d'intitules figee on lit
   "Aucune" ou "Trente jours" sans savoir de quelle ligne il s'agit, et le meilleur
   argument de la page devient illisible la ou la cible lit, c'est a dire au telephone.
   border-collapse:collapse mange les bordures des cellules collantes, d'ou le passage
   en separate ici, et le fond opaque doit etre celui de la section, qui est .band. */
.cmp-swipe{display:none;align-items:center;gap:9px;margin-top:14px;font-size:14px;color:var(--ink-2)}
.cmp-swipe svg{flex:0 0 auto;color:var(--acc)}
@media (max-width:820px){
  .cmp{border-collapse:separate;border-spacing:0}
  .cmp thead th:first-child,.cmp tbody th{position:sticky;left:0;z-index:1;background:var(--band);box-shadow:1px 0 0 var(--line)}
  .cmp-swipe{display:flex}
}
/* Sous 640 le defilement reste illisible (Carlos, 24.08) : on linearise. Chaque
   critere devient une fiche, les 4 canaux en lignes libellees par data-c, la valeur
   Cimmeco soulignee d'un filet or. Plus aucun scroll horizontal. */
@media (max-width:640px){
  .cmp{min-width:0;border-collapse:collapse}
  .cmp thead{display:none}
  .cmp tbody,.cmp tr,.cmp tbody th,.cmp td{display:block;width:100%}
  .cmp tr{padding:16px 0 14px;border-top:1px solid var(--line)}
  .cmp tr:first-child{border-top:0;padding-top:0}
  .cmp tbody th{position:static;background:none;box-shadow:none;border-bottom:0;padding:0 0 10px}
  .cmp td{display:grid;grid-template-columns:96px 1fr;column-gap:14px;padding:4px 0;border-bottom:0;font-size:16px}
  .cmp td::before{content:attr(data-c);font-size:14px;letter-spacing:.04em;color:var(--ink-3);padding-top:2px}
  /* En colonne unique, la ligne Cimmeco se distingue par la couleur de son libelle et
     le gras, sans cadre ni fond : la petite carte chargeait trop la liste (Carlos 29.09). */
  .cmp td.us,.cmp .franc .us,.cmp tbody tr:last-child .us{background:none;border:0}
  .cmp td.us::before{color:var(--acc);font-weight:650}
  .cmp-swipe{display:none}
}
.cmp-note{margin-top:20px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:70ch;text-wrap:balance}
.cmp-note b{color:var(--ink)}
.cmp-faq{margin-top:24px}
/* La note de source sous le tableau est partie le 29.09 (Carlos : du texte pour rien), le
   bouton suit donc directement les depliants.
   En inline-flex, le bouton vit dans une ligne de texte et sa marge haute est en
   partie mangee par la ligne : 30 px demandes, 10 px obtenus. En flex il devient un
   bloc, `width:fit-content` lui garde sa largeur de bouton. */
.cmp-faq+.btn{margin-top:30px;display:flex;width:fit-content}
@media(max-width:640px){.cmp-faq+.btn{width:100%;justify-content:center;text-align:center}} /* apres la regle de base, sinon fit-content gagne (Carlos 17.09) */

/* --- pastille d'icone ---
   Redefinit .look .ic : les icones nues de 22 px se lisaient comme des taches
   a l'echelle de la page. Le SVG est force a 24 px ici plutot que dans les
   24 balises concernees. */
.look .ic{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);align-items:center;justify-content:center}
.look .ic svg{width:24px;height:24px}
.dark .look .ic{border-color:var(--dark-line)}
.band .look .ic{background:var(--paper)}

/* la carte passe pleine largeur avant que sa colonne ne tombe sous 690px,
   sinon elle basculerait sur ses libelles mobile en restant sur deux colonnes */
@media(max-width:1200px){
  .zmap{grid-template-columns:1fr}
}
@media(max-width:1000px){
  .faqx{grid-template-columns:1fr;gap:36px}
  .faq-card{position:relative;top:auto;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center} /* relative et non static : static annulait le sticky mais envoyait l'ornement ::after au coin d'un ancetre (Carlos 17.09) ; top:auto obligatoire, sinon le top:98px du sticky decale la carte de 98 px et elle chevauche la section suivante (18.09) */
  .faq-card>img{height:100%;aspect-ratio:auto;min-height:220px}
  .zmap{gap:34px}
  .chain{grid-template-columns:repeat(2,1fr)}
  .chain.c3{grid-template-columns:repeat(3,1fr)}
  .steps.illus{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .faq-card{grid-template-columns:1fr}
  .faq-card>img{min-height:0;aspect-ratio:16/9}
  .chain,.chain.c3,.chain.c2{grid-template-columns:1fr;gap:26px}
  .steps.illus{grid-template-columns:1fr;gap:32px}
  .steps.illus .pstep .vgw{margin-bottom:16px}
  .gal{grid-template-columns:repeat(3,1fr)}
  .zmap-legend{gap:8px 16px;font-size:16px}
}

/* ===== SCENE « ce que l'estimation automatique ne regarde pas » =====
   Une seule carte est ouverte a la fois : fond bordeaux, image raccourcie,
   accroche de trois lignes et bouton. L'image absorbe exactement la place que
   prend le developpement, la hauteur totale ne bouge donc jamais, et les marges
   negatives compensees par les paddings gardent icone et titre immobiles.
   Qui ouvre : au pointeur, app.js pose .on au pointerenter carte par carte (les
   trous entre tuiles ne changent rien) ; au tactile et sous 981px, un
   IntersectionObserver la donne a la carte qui traverse la bande centrale de
   l'ecran pendant le defilement. La premiere carte porte .on dans le markup,
   l'etat par defaut tient donc sans JavaScript. :focus-within ouvre au clavier.
   .cx #pourquoi-nous ... bat le transition-property du stagger (.rv.stg>*) par
   specificite, en re-listant opacity/transform avec le delai --sd. */
.cx #pourquoi-nous .looks>.look{transition:opacity .7s var(--ease) var(--sd,0ms),transform .7s var(--ease) var(--sd,0ms),background-color .4s var(--ease),margin .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease),grid-template-rows .5s var(--ease)}
#pourquoi-nous .look h3,#pourquoi-nous .look p{transition:color .4s}
#pourquoi-nous .look .vgw{aspect-ratio:auto;transition:height .5s var(--ease)}
#pourquoi-nous .look .more{grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
#pourquoi-nous .look .mi{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s var(--ease)}
#pourquoi-nous .look .more p{min-height:4.65em} /* 3 lignes reservees : toutes les cartes ouvertes font la meme hauteur */
#pourquoi-nous .look.on,#pourquoi-nous .look:focus-within{background:var(--dark);border-top-color:transparent}
#pourquoi-nous .look.on h3,#pourquoi-nous .look:focus-within h3{color:var(--on-dark)}
#pourquoi-nous .look.on p,#pourquoi-nous .look:focus-within p{color:var(--on-dark-2)}
#pourquoi-nous .look.on .more,#pourquoi-nous .look:focus-within .more{grid-template-rows:1fr}
#pourquoi-nous .look.on .mi,#pourquoi-nous .look:focus-within .mi{opacity:1;transform:none}
@media(min-width:981px){
  /* La rangee ne bouge jamais : sa hauteur vient des cartes fermees (image de
     332 px) et la carte ouverte tient dans la meme hauteur, son image prenant
     ce que le texte lui laisse (piste image en 1fr, .more en auto). Avant, la
     carte ouverte fixait son image a 190 px et reservait 3 lignes de texte :
     des qu'un texte en faisait 4, toute la rangee grandissait et les images
     des trois voisines descendaient de 13 px a chaque survol. Le minimum de la
     piste image (332 px ferme, 0 ouvert) transitionne en meme temps que .more,
     l'image suit donc la place restante sans jamais sauter. */
  #pourquoi-nous .look{grid-template-rows:auto minmax(332px,1fr) auto;align-content:start}
  #pourquoi-nous .look.on,#pourquoi-nous .look:focus-within{grid-template-rows:auto minmax(0,1fr) auto}
  #pourquoi-nous .look .vgw{height:100%;min-height:0;contain:size;transition:none} /* contain:size : sans taille intrinseque, l'image ne pousse jamais la piste, elle la remplit */
  #pourquoi-nous .look.on,#pourquoi-nous .look:focus-within{margin:-26px -14px -30px;padding:48px 14px 30px}
  #pourquoi-nous .zone-note{margin-top:calc(clamp(28px,3.4vw,44px) + 30px)} /* rend les 30px que le bleed bas de la carte ouverte lui mange */
}
@media(max-width:980px){
  /* Cartes en flux normal : claires (le tout-bordeaux etait trop lourd), pleine
     largeur, completes, et elles apparaissent en douceur a leur entree dans
     l'ecran (app.js pose .in, le leger decalage vient des delais --sd). */
  #pourquoi-nous .looks{display:block;margin-top:16px}
  #pourquoi-nous .look{background:#fff;border:1px solid var(--line);
    box-shadow:var(--sh-img); /* meme relief que les images, la carte le porte */
    margin:0 -12px;padding:14px 12px 16px; /* 12px partout : entre tuiles, dans la tuile, et au bord de l'ecran */
    opacity:0;transform:translateY(24px)}
  #pourquoi-nous .look.in{opacity:1;transform:none}
  #pourquoi-nous .look+.look{margin-top:12px}
  #pourquoi-nous .look .vgw{height:200px;box-shadow:none} /* le relief est porte par la carte, pas par l'image dedans */
  #pourquoi-nous .look .more{grid-template-rows:1fr}
  #pourquoi-nous .look .mi{opacity:1;transform:none}
  #pourquoi-nous .zone-note{margin-top:clamp(28px,3.4vw,44px)}
}
@media(max-width:640px){
  /* etape coordonnees : un champ par ligne, et les boutons s'empilent pour que
     le libelle d'envoi tienne d'un bloc (principal au-dessus, secondaire dessous) */
  .wiz .g2,.formcol .g2{grid-template-columns:1fr}
  .wnav{flex-direction:column-reverse}
  .wnav .btn{flex:0 0 auto} /* en colonne, flex:1 ecraserait la hauteur des boutons */
  /* Les quatre types de bien sur une colonne : en 2x2 les libelles se coupaient sur deux
     ou trois lignes et les cartes n'avaient pas la meme hauteur. Et « Precedent » cesse
     d'etre un second bouton or : contour fin, il ne dispute plus « Suivant » (Carlos 17.09). */
  .wiz .choices{grid-template-columns:1fr}
  .wiz .choice{padding:14px 16px}
  .wnav #wprev{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
}

/* ===== BANNIERE COOKIES =====
   Meme dispositif que DST Decap (trois categories, Consent Mode v2, reouverture depuis le
   pied de page), redessine dans le vocabulaire d'ici : angles vifs, papier et or, et rien
   sous 16 px sur ce qui se lit ou se clique. Pas de pastille arrondie facon interrupteur,
   qui jurerait avec --r:0 ; une case carree qui se remplit d'or.
   Le bloc est en position:fixed, il n'entre donc dans aucun calcul de mise en page : pas
   de decalage a l'apparition, meme injecte apres le chargement. */
.ck{position:fixed;inset:auto 0 0 0;z-index:140;display:flex;justify-content:center;
  padding:0 16px 16px;pointer-events:none}
/* display:flex ecrase l'attribut hidden (une regle auteur bat toujours la feuille du
   navigateur) : le bandeau ferme restait en place, invisible, et .ck-in en pointer-events:auto
   avalait les clics sur Mentions legales, Confidentialite et Cookies (retour Carlos 17.09). */
.ck[hidden]{display:none}
.ck-in{pointer-events:auto;width:100%;max-width:720px;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 -6px 44px -16px rgba(56,21,30,.45);
  padding:24px;max-height:82vh;overflow-y:auto;opacity:0;transform:translateY(18px);
  transition:opacity .35s var(--ease),transform .45s var(--ease)}
.ck.on .ck-in{opacity:1;transform:none}
.ck h2{font-size:20px;line-height:1.25;margin-bottom:8px;font-variation-settings:"opsz" 24}  /* 24 et non 60 : c'est l'echelon des h3, la taille optique des grands titres serait trop dessinee ici */
.ck>div>p{font-size:16px;line-height:1.55;color:var(--ink-2);margin-bottom:18px}
/* .cx a{color:inherit;text-decoration:none} neutralise les liens partout : sans cette
   regle, le renvoi vers la politique de confidentialite ne se voit pas dans la banniere */
.ck p a{color:var(--acc-txt);text-decoration:underline;text-underline-offset:2px}
.ck p a:hover{color:var(--ink)}
.ck-cats{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-bottom:18px}
.ck-cat{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;cursor:pointer}
.ck-cat input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--paper);position:relative;cursor:pointer;
  transition:background .2s,border-color .2s}
.ck-cat input:checked{background:var(--acc);border-color:var(--acc)}
.ck-cat input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--on-dark);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ck-cat input:disabled{cursor:default;opacity:.6}
.ck-cat.fixe{color:var(--ink-3);cursor:default}
.ck-det{background:none;border:0;padding:0;font-family:inherit;font-size:16px;font-weight:600;
  color:var(--acc-txt);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* meme idiome d'ouverture que les cartes de « pourquoi nous » : la hauteur s'anime sans
   valeur en dur, donc le texte peut changer sans casser la transition */
.ck-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.ck.det .ck-more{grid-template-rows:1fr}
.ck-more>div{overflow:hidden}
.ck-more dl{display:grid;gap:12px;padding-top:16px;margin-bottom:18px;border-top:1px solid var(--line)}
.ck-more dt{font-size:16px;font-weight:650;margin-bottom:2px}
.ck-more dd{font-size:16px;line-height:1.5;color:var(--ink-2)}
/* « Personnaliser » ouvre les cases, ce n'est pas un choix qu'on valide : il reste en
   bouton texte pour que les deux vraies décisions, accepter et refuser, gardent la même
   surface et le même poids l'une que l'autre. */
.ck-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ck-acts .btn{height:48px;padding:0 20px;flex:1 1 auto}
.ck-acts .ck-det{flex:0 0 auto;margin-left:4px}
/* enregistrer un choix n'a de sens qu'une fois les cases visibles */
/* Une seule ligne, Personnaliser a gauche et la politique a droite : sur telephone les
   deux passaient l'un sous l'autre et le bandeau prenait une ligne de plus (Carlos 17.09). */
.ck-bas{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:nowrap;gap:8px 14px;margin-top:14px}
.ck-bas>*{white-space:nowrap}
@media(max-width:340px){.ck-bas{flex-wrap:wrap}} /* sous 340 px les deux ne tiennent plus (93 + 172 px), on accepte la seconde ligne */
.ck-bas .ck-det{font-size:14px}
.ck-legal{font-size:14px;line-height:1.5;color:var(--ink-3);margin:0}
.ck-legal a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.ck-legal a:hover{color:var(--ink)}
.ck-save{display:none}
.ck.det .ck-save{display:inline-flex}
/* le pied de page rouvre la banniere : un bouton, pas un lien, il ne mene nulle part */
.ft-bot .ck-open{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* 462 px de haut sur un iPhone 16 Pro Max au 31.08, soit 48 % de l'écran : le bandeau
   couvrait le contenu qu'il demande l'autorisation de mesurer. Aucune taille de texte
   n'est descendue pour le réduire, le plancher de 16 px vaut ici comme partout (c'est
   par là que le bandeau d'un autre site gagne sa compacité, et c'est ce qu'on refuse).
   Ce qui part : une phrase que les trois boutons disaient déjà, l'empilement des boutons
   sur trois lignes, et les cases repliées derrière « Personnaliser » — accepter et
   refuser restent tous deux à un geste, à poids égal. */
/* Sous 480 px la colonne de texte du portrait touchait la photo au-dessus et la section
   suivante en dessous, et son alignement a gauche sous une image pleine largeur se lisait
   comme un decalage. Centre, avec une respiration courte. */
@media(max-width:480px){
  .person .who{text-align:center;padding:18px 0 0}
  .person .who .links{justify-content:center}
  /* seules les lignes courtes se centrent : un paragraphe centre sur cinq lignes fait
     repartir chaque ligne d'un point different, l'oeil perd le debut de ligne */
  .person .who p,.person .who .who-pts{text-align:left}
}

@media(max-width:640px){
  .ck{padding:0 12px 12px}
  .ck-in{padding:18px 16px}
  .ck h2{margin-bottom:6px}
  .ck>div>p{margin-bottom:14px}
  .ck-cats{gap:10px 16px;margin-bottom:16px}
  .ck-cat{gap:8px}
  .ck-more dl{padding-top:14px;margin-bottom:14px}
  .ck-acts{justify-content:center}
  .ck-acts .btn{flex:1 1 calc(50% - 5px);padding:0 12px}
  .ck-acts .ck-det{flex:1 1 100%;margin:2px 0 0;text-align:center}
  .ck.det .ck-save{flex:1 1 100%}
}

/* ---------- fenetre « Etre recontacte » (page Acheter, 29.09) ----------
   <dialog> natif ouvert par showModal() : couche superieure, donc au-dessus de l'en-tete
   et du bandeau cookies. Le padding est sur le formulaire et pas sur le dialog, pour
   qu'un clic dans la fenetre ne soit jamais pris pour un clic sur le voile. */
.dlg{margin:auto;padding:0;border:1px solid var(--line);border-radius:var(--ang) 0 0 0;background:var(--paper);color:var(--ink);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-shadow:var(--sh-img);overscroll-behavior:contain}
.dlg::backdrop{background:rgba(22,8,12,.55)}
.dlg form{position:relative;padding:clamp(24px,4vw,40px)}
.dlg h2{font-size:clamp(1.6rem,3vw,2rem);margin:10px 0 8px}
.dlg-sub{color:var(--ink-2);font-size:16px;line-height:1.55;margin-bottom:22px}
.dlg-x{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--ink-2);cursor:pointer}
.dlg-x:hover{color:var(--ink)}
.dlg .dlg-send .btn{width:100%;margin-top:22px}
.dlg .done .btn{margin:22px auto 0;display:flex}
@media(max-width:640px){
  /* en telephone, la fenetre monte du bas et prend la largeur : une modale centree
     se ferait recouvrir par le clavier */
  .dlg{width:100vw;max-width:100vw;margin:auto 0 0;max-height:92dvh;border-width:1px 0 0}
  .dlg .g2{grid-template-columns:1fr}
  /* le bouton d'envoi reste visible en bas de la feuille pendant le defilement */
  .dlg .dlg-send{position:sticky;bottom:0;margin:0 calc(-1 * clamp(24px,4vw,40px));padding:0 clamp(24px,4vw,40px) 12px;background:var(--paper)}
}