/* ===========================================================================
   HSP Engineering — feuille de style
   Monde : le dossier technique. Papier froid, champs cobalt, une seule
   famille typographique sur toute sa matrice de largeurs, filets de tableau.
   =========================================================================== */

@font-face{
  font-family:'Encode Sans VF';
  src:url('../fonts/encodesans-var-latin.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:75% 125%; 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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Encode Sans VF';
  src:url('../fonts/encodesans-var-latin-ext.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:75% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- jetons ------------------------------------------------------------- */
:root{
  --pap:#EEF2F7;        /* papier froid, dérivé du blanc bleuté du logo   */
  --canevas:#003663;    /* le hors-page : rebond, arrière de barre d'état.
                           Même bleu que le cartouche et que la barre
                           d'en-tête des formats compacts : le haut de
                           l'écran ne fait qu'un seul bandeau.              */
  --pap-b:#FFFFFF;      /* les fenêtres, les plaques, les tableaux        */
  --pap-z:#E5EBF3;      /* zébrure de tableau                              */
  --filet:#C8D4E2;      /* filet de tableau                                */
  --filet-f:#9FB3C8;    /* filet appuyé                                    */

  --enc:#0B1723;        /* encre                                           */
  --enc-2:#455A70;      /* texte secondaire       — 7.0:1 sur papier       */
  --enc-3:#5E7286;      /* étiquettes             — 4.8:1 sur papier       */

  --cob:#0060B4;        /* champ cobalt — la couleur du logo               */
  --cob-f:#004A8C;      /* cobalt appuyé (survol, bandes)                  */
  --cob-p:#003663;      /* cartouche                                       */
  --cyan:#0CA8E4;       /* MARQUE GRAPHIQUE UNIQUEMENT — jamais du texte   */

  --sur-c:#CFE0F2;      /* texte secondaire sur cobalt — 4.6:1             */
  --sur-c3:#A8C6E6;     /* étiquettes sur cobalt       — 3.3:1, gros seul  */

  --amb:#7A4A00;        /* marqueur « à compléter »                        */
  --amb-f:#F2C14E;

  --r-t:7px;            /* rayon des commandes d'en-tête, seul arrondi de la page */

  --rail-h:56px;

  --marge:clamp(20px,4.4vw,72px);
  --large:1560px;
  --u:8px;

  /* ── échelle typographique ────────────────────────────────────────────
     Une seule suite, du repère de cartouche au titre d'ouverture. Toute
     nouvelle taille se prend ici ; rien n'est écrit en dur ailleurs.      */
  --t1:.625rem;    /* 10 · repères de planche, indices                    */
  --t2:.6875rem;   /* 11 · étiquettes de champ, mentions                  */
  --t3:.75rem;     /* 12 · légendes de fenêtre, notes                     */
  --t4:.8125rem;   /* 13 · libellés de rail, index, marques d'état        */
  --t5:.875rem;    /* 14 · texte secondaire, listes, cellules de tableau  */
  --t6:.9375rem;   /* 15 · boutons, listes de détail                      */
  --t7:1rem;       /* 16 · texte de panneau                               */
  --t8:1.0625rem;  /* 17 · texte courant — la base                        */
  --t9:1.125rem;   /* 18 · chapeau                                        */
  --t10:1.1875rem; /* 19 · titre de fiche                                 */
  --t11:1.3125rem; /* 21 · numéro de phase                                */
  --t12:1.5rem;    /* 24 · réserve                                        */
  --d1:1.75rem;    /* 28 · h3 de secteur, borne basse                     */
  --d2:2rem;       /* 32                                                  */
  --d3:2.25rem;    /* 36 · borne basse de h1                              */
  --d4:3.25rem;    /* 52 · borne haute de h2                              */
  --d5:3.5rem;     /* 56 · réserve                                        */
  --d6:4.75rem;    /* 76 · borne haute de h1                              */

  /* palette étendue, relevée sur l’usage réel de la feuille */
  --sur-cy:#04263F;  /* texte posé sur un aplat cyan */
  --ind:#0B6B63;  /* secteur industrie : vert-bleu profond. Le cyan assombri
                     d'avant ne se distinguait pas du cobalt — 1,4:1 entre eux,
                     ΔE 28 — et échouait au seuil AA en pastille de texte.    */
  --sur-p3:#7FA8CF;  /* étiquettes sur le cartouche */
  --indice:#8899AC;  /* texte indicatif dans les champs */
  --pap-h:#DCE7F5;  /* survol de ligne de tableau */
  --hach-a:#E7EDF5;  /* hachure du cadre réservé */
  --hach-b:#EEF3F9;
  --carte-t:#F1F6FB;  /* remplissage de canton */
  --carte-f:#B6C7DA;  /* filet de canton */
  --carte-l:#CADCEF;  /* lac */
  --carte-lf:#A9C3DC;  /* rive de lac */
  --scan-c:#061626;  /* cadre du relevé */
  --scan-f:#04101C;  /* fond du relevé */
  --err:#A32020;  /* bordure de champ invalide */
  --err-t:#8E1B1B;  /* texte d’erreur */
  --err-f:#FDF3F3;  /* fond de champ invalide */
}

*,*::before,*::after{box-sizing:border-box}
/* Le fond du hors-page se prend sur la racine, pas sur le corps : rebond de
   défilement en haut et en bas, et sur iPhone la bande derrière la barre
   d'état, que `viewport-fit=cover` fait remonter sous la photo d'ouverture.
   Sans cette ligne, c'est le papier clair du corps qui est propagé au
   canevas, et un liseré blanc se voit au-dessus de l'ouverture.            */
html{background:var(--canevas)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--rail-h) + 80px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Le corps porte le bleu du hors-page, pas le papier : c'est sur le fond du
   corps que Safari iOS relève la teinte de sa barre d'état. Le papier est
   descendu sur le contenu (#principal), qui couvre toute la page — le rendu
   ne bouge pas, mais la bande du haut cesse d'être claire.                 */
body{
  margin:0; background:var(--canevas); color:var(--enc);
  font-family:'Encode Sans VF','Encode Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:var(--t8); line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums; overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
figure,figcaption{margin:0}
[hidden]{display:none!important}
a{color:inherit}
::selection{background:var(--cyan);color:var(--sur-cy)}

/* --- utilitaires typographiques ----------------------------------------- */
.cd{font-variation-settings:'wdth' 82}       /* condensé — titres, données  */
.et{                                          /* étiquette de champ         */
  font-variation-settings:'wdth' 80; font-weight:600; font-size:var(--t3);
  letter-spacing:.055em; text-transform:uppercase; color:var(--enc-3);
  line-height:1.3;
}
.clause{                                      /* chapeau de section          */
  font-variation-settings:'wdth' 80; font-weight:700; color:var(--cob);
  font-size:clamp(var(--t9),1.42vw,var(--t11)); letter-spacing:.02em;
}
.mesure{max-width:64ch}

#principal{background:var(--pap)}

/* --- ossature ------------------------------------------------------------ */
.enveloppe{max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}

/* cadre de planche : filet de rive et repères d'angle, comme sur un plan A0 */
.feuille{position:fixed;inset:13px;pointer-events:none;z-index:1;
  border:1px solid rgba(11,23,35,.085)}
.feuille i{position:absolute;width:11px;height:11px;border:0;
  border-color:rgba(11,23,35,.26);border-style:solid;border-width:0}
.feuille i.c1{top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px}
.feuille i.c2{top:-1px;right:-1px;border-top-width:1.5px;border-right-width:1.5px}
.feuille i.c3{bottom:-1px;left:-1px;border-bottom-width:1.5px;border-left-width:1.5px}
.feuille i.c4{bottom:-1px;right:-1px;border-bottom-width:1.5px;border-right-width:1.5px}
@media (max-width:1180px){.feuille{display:none}}

/* --- mention suisse ------------------------------------------------------
   Le drapeau est tracé, jamais une image : net à toute taille, et il porte
   la couleur fédérale. La mention reste en anglais dans les deux langues :
   c'est le label que lisent les clients étrangers.                        */
.ch{width:1.05em;height:1.05em;flex:0 0 auto;display:block}
.suisse{display:inline-flex;align-items:center;gap:8px}
.suisse--pied{
  margin:0 0 12px;font-variation-settings:'wdth' 82;font-weight:700;font-size:var(--t4);
  letter-spacing:.06em;color:#fff;
}

/* --- en-tête -------------------------------------------------------------- */
/* La barre est posée sur la photographie d'ouverture : transparente tant qu'on
   y est, elle prend son fond clair dès qu'on la quitte (classe « tete--pose »
   mise par le script). Les deux états partagent la même géométrie.          */
.tete{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s, border-color .25s, backdrop-filter .25s;
}
/* Sur les formats compacts — là où la barre se réduit à la marque, au menu
   de langue et au bouton de menu — elle ne se pose plus sur la photographie :
   elle prend l'aplat bleu profond du cartouche, celui-là même que porte le
   hors-page. Le bandeau du navigateur et la barre ne font plus qu'un.     */
@media (max-width:1080px){
  .tete{background:var(--canevas);border-bottom-color:rgba(255,255,255,.16)}
}
.tete--pose{
  background:rgba(238,242,247,.93);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--filet);
}
.tete__in{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);min-height:72px}
/* Le verrou complet — signe, lettrage et « MADE IN SWITZERLAND » — tel que
   fourni. Deux tirages : lettrage blanc sur la photographie, noir une fois
   la barre posée sur le papier.                                           */
.marque{display:block;flex:0 0 auto;line-height:0;text-decoration:none}
.marque__v{height:46px;width:auto;display:block}
.marque__v--p{display:none}
.tete--pose .marque__v--f{display:none}
.tete--pose .marque__v--p{display:block}

/* les liens sont pris dans une capsule : un seul objet dans la barre */
.nav{
  display:flex;gap:2px;margin-left:auto;flex-wrap:nowrap;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(9px);border-radius:999px;padding:4px;
  transition:background-color .25s,border-color .25s;
}
.nav a{
  text-decoration:none;color:rgba(255,255,255,.9);font-size:var(--t5);font-weight:500;
  font-variation-settings:'wdth' 90;padding:7px 14px;white-space:nowrap;
  border-radius:999px;transition:color .16s,background-color .16s;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.16)}
.nav a[aria-current="true"]{color:#fff;background:rgba(255,255,255,.22)}
.tete--pose .nav{background:rgba(255,255,255,.66);border-color:var(--filet)}
.tete--pose .nav a{color:var(--enc-2)}
.tete--pose .nav a:hover{color:var(--cob);background:var(--hach-b)}
.tete--pose .nav a[aria-current="true"]{color:var(--cob);background:var(--pap-h)}
@media (max-width:1080px){.nav{display:none}}

.tete__d{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto}
@media (min-width:1081px){.tete__d{margin-left:0}}
/* --- menu déroulant des langues -------------------------------------------
   Un bouton qui porte le code courant, une liste qui tombe dessous. Le tout
   au clavier comme à la souris ; fermé au clic dehors et à Échap.         */
.langue{position:relative}
.langue__b{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);
  border-radius:var(--r-t);padding:7px 10px;color:#fff;font:inherit;
  font-variation-settings:'wdth' 80;font-weight:700;font-size:var(--t2);letter-spacing:.07em;
  transition:background-color .25s,border-color .25s,color .25s;
}
.langue__g{width:15px;height:15px;flex:0 0 auto}
.langue__f{width:9px;height:6px;flex:0 0 auto;transition:transform .2s}
.langue__b[aria-expanded="true"] .langue__f{transform:rotate(180deg)}
.tete--pose .langue__b{border-color:var(--filet);background:var(--pap-b);color:var(--enc-2)}
.langue__b:hover{color:#fff}
.tete--pose .langue__b:hover{color:var(--enc)}
.langue__b:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.langue__m{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  list-style:none;margin:0;padding:5px;min-width:172px;
  background:var(--pap-b);border:1px solid var(--filet);border-radius:var(--r-t);
  box-shadow:0 12px 34px rgba(4,16,28,.22);
}
.langue__m li{margin:0}
.langue__m a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 12px;border-radius:calc(var(--r-t) - 2px);text-decoration:none;
  color:var(--enc-2);font-size:var(--t5);font-variation-settings:'wdth' 92;
}
.langue__m a:hover{background:var(--hach-b);color:var(--cob)}
.langue__m a[aria-current="true"]{background:var(--pap-h);color:var(--cob);font-weight:650}
.langue__m b{
  font-variation-settings:'wdth' 78;font-weight:700;font-size:var(--t1);
  letter-spacing:.1em;color:var(--enc-3);
}
.langue__m a[aria-current="true"] b{color:var(--cob)}

/* bouton d'appel : le seul aplat plein de l'en-tête */
.cta-t{
  text-decoration:none;background:#fff;color:var(--enc);border-radius:var(--r-t);
  padding:8px 17px;font-size:var(--t5);font-weight:600;font-variation-settings:'wdth' 90;
  white-space:nowrap;transition:background-color .2s,color .2s;
}
.cta-t:hover{background:var(--cyan);color:var(--sur-cy)}
.tete--pose .cta-t{background:var(--enc);color:#fff}
.tete--pose .cta-t:hover{background:var(--cob)}
@media (max-width:420px){.cta-t{display:none}}
/* Sur téléphone la barre n'a de place que pour la marque, la langue et le menu :
   la ligne de qualité s'efface — elle est reprise par le pavé de l'ouverture. */
@media (max-width:620px){
  .tete__in{gap:10px;min-height:62px}
  .marque{gap:8px}
  .marque__v{height:33px}
  .tete__d{gap:8px}
  .langue a{padding:5px 9px;font-size:var(--t1);letter-spacing:.05em}
  .burger{width:34px;height:31px}
  .burger span{left:9px;right:9px}
  .burger span:nth-child(1){top:10px}
  .burger span:nth-child(2){top:15px}
  .burger span:nth-child(3){top:20px}
}

.burger{
  display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-t);width:38px;height:34px;cursor:pointer;padding:0;position:relative;
}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:#fff;transition:transform .25s,opacity .2s}
.tete--pose .burger{background:var(--pap-b);border-color:var(--filet)}
.tete--pose .burger span{background:var(--enc)}
.burger span:nth-child(1){top:11px}.burger span:nth-child(2){top:16px}.burger span:nth-child(3){top:21px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:1080px){.burger{display:block}}

.tiroir{display:none;border-top:1px solid var(--filet);background:var(--pap-b)}
.tiroir.ouvert{display:block}
.tiroir a{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px var(--marge);text-decoration:none;color:var(--enc);
  border-bottom:1px solid var(--filet);font-weight:500;
}
.tiroir a .clause{color:var(--enc-3)}
.tiroir__c{display:flex;flex-wrap:wrap;gap:10px;padding:16px var(--marge) 20px}
.tiroir__c a{border:1px solid var(--filet-f);padding:10px 16px;flex:1 1 auto;justify-content:center;
  font-size:var(--t5);font-weight:600;color:var(--cob)}
@media (min-width:1081px){.tiroir{display:none!important}}

/* --- rail du dossier ------------------------------------------------------
   Il ne commence qu'après l'ouverture : sur la photographie, la barre reste
   seule. Ensuite il se colle sous elle et suit la lecture.                  */
.rail{
  position:sticky;top:72px;z-index:35;background:var(--pap-b);
  border-bottom:1px solid var(--filet);height:var(--rail-h);
}
.rail__in{display:flex;align-items:stretch;height:100%;position:relative}
.rail__p{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--cyan);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear;will-change:transform}
.rail a{
  flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:1px;
  text-decoration:none;padding:0 12px;border-right:1px solid var(--filet);
  color:var(--enc-3);min-width:0;transition:background .18s,color .18s;
}
.rail a:last-child{border-right:0}
.rail a:hover{background:var(--pap);color:var(--cob)}
.rail a[aria-current="true"]{background:var(--pap);color:var(--cob);
  box-shadow:inset 0 -2px 0 var(--cyan)}
.rail a[aria-current="true"] .rail__l{font-weight:700}
.rail__l{font-variation-settings:'wdth' 84;font-weight:600;font-size:var(--t4);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1080px){.rail{display:none}}

/* --- nos services --------------------------------------------------------
   Une grille tracée au filet, comme une planche : l'en-tête occupe la première
   bande, les cartes suivent. Chaque cadre porte la photographie du service ;
   la flèche se loge dans l'encoche du cadre.                                */
.srv-t{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;
  padding-bottom:clamp(30px,4vw,54px);border-bottom:1px solid var(--filet);
}
.clause--barre{display:flex;align-items:baseline;gap:9px}
.srv-t__h{
  margin:14px 0 0;text-transform:uppercase;letter-spacing:-.012em;
  font-variation-settings:'wdth' 86;
}
.srv-t__d{display:grid;gap:clamp(12px,1.4vw,18px)}
.srv-t__p{margin:0;font-size:var(--t8);line-height:1.65;color:var(--enc-2);max-width:46ch}
.srv-t__p b{color:var(--enc);font-weight:700;font-variation-settings:'wdth' 92}
@media (max-width:900px){.srv-t{grid-template-columns:1fr;gap:22px}}

.srv{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.srv__c{
  padding:clamp(26px,3vw,44px) clamp(20px,2.4vw,38px) clamp(30px,3.4vw,48px);
  border-right:1px solid var(--filet);
}
.srv__c:last-child{border-right:0}

/* le cadre : une encoche en bas à gauche, où vient se poser la flèche */
.srv__v{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--pap-z);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 30% 100%, 30% 88%, 0 88%);
}
.srv__v img{width:100%;height:100%;object-fit:cover;display:block}
/* réserve : tant que la photographie n'est pas déposée */
.srv__v--vide{
  background:repeating-linear-gradient(135deg,var(--hach-a) 0 12px,var(--hach-b) 12px 24px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
}
.srv__v--vide::after{
  content:attr(data-fichier);font-size:var(--t2);font-variation-settings:'wdth' 80;
  font-weight:700;letter-spacing:.06em;color:var(--enc-3);
}
.srv__f{display:block;margin:-26px 0 20px;color:var(--cyan)}
.srv__f svg{width:22px;height:22px}
.srv__t{
  font-size:var(--t11);line-height:1.15;text-transform:uppercase;letter-spacing:-.008em;
  font-variation-settings:'wdth' 88;margin-bottom:12px;
}
.srv__d{margin:0 0 14px;font-size:var(--t6);line-height:1.6;color:var(--enc-2)}
.srv__r{margin:0;font-size:var(--t3);line-height:1.55;color:var(--enc-3)}
.srv__r b{
  display:block;font-variation-settings:'wdth' 80;font-weight:700;font-size:var(--t1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--cob);margin-bottom:3px;
}
@media (max-width:980px){
  .srv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srv__c{border-bottom:1px solid var(--filet)}
  .srv__c:nth-child(2n){border-right:0}
  .srv__c:last-child{border-bottom:0}
}
@media (max-width:620px){
  .srv{grid-template-columns:1fr}
  .srv__c{border-right:0;padding-inline:0}
  .srv__v{aspect-ratio:3/2}
}

/* --- familles de prestations ----------------------------------------------
   Les six cartes se lisent en deux temps : ce qui se décide sur la planche,
   ce qui se vérifie ensuite sur le chantier et se garde dans la durée.
   Chaque famille ouvre sa bande — lettre de clause soulignée du cyan, puis
   l'intitulé — et le filet appuyé la détache de la famille précédente.
   Une famille tient une rangée de trois cartes : les filets ci-dessus sont
   écrits pour cette rangée-là.                                            */
.fam{
  display:flex;align-items:baseline;gap:clamp(13px,1.5vw,19px);
  padding:clamp(24px,2.8vw,38px) 0 clamp(15px,1.6vw,21px);
  border-bottom:1px solid var(--filet);
}
.srv + .fam{margin-top:clamp(28px,3.4vw,48px);border-top:1.5px solid var(--filet-f)}
.fam__n{
  flex:none;padding-bottom:6px;border-bottom:2px solid var(--cyan);
  font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.2;
  font-weight:700;font-variation-settings:'wdth' 78;
  letter-spacing:.06em;color:var(--cob);
}
.fam__t{
  margin:0;font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.2;
  text-transform:uppercase;letter-spacing:.004em;font-weight:700;
  font-variation-settings:'wdth' 84;color:var(--enc);
}
@media (max-width:620px){.fam{padding-inline:0}}

/* La carte entière est un lien : le titre le porte, et une couche invisible
   l'étend au cadre. Au survol, tout passe au cobalt — c'est le seul endroit
   de la planche où la couleur signale un ailleurs.                         */
.srv__c{position:relative;transition:background-color .18s}
.srv__a{color:inherit;text-decoration:none}
.srv__a::after{content:'';position:absolute;inset:0;z-index:2}
.srv__f{transition:color .18s,transform .22s cubic-bezier(.16,1,.3,1)}
.srv__v{transition:box-shadow .18s}
.srv__c:focus-within{background:var(--pap-h)}
.srv__c:focus-within .srv__t{color:var(--cob)}
.srv__c:focus-within .srv__f{color:var(--cob)}
.srv__a:focus-visible{outline:none}
.srv__a:focus-visible::after{outline:2.5px solid var(--cob);outline-offset:-5px}
@media (hover:hover){
  .srv__c:hover{background:var(--pap-h)}
  .srv__c:hover .srv__t{color:var(--cob)}
  .srv__c:hover .srv__f{color:var(--cob);transform:translateX(5px)}
  .srv__c:hover .srv__v{box-shadow:inset 0 0 0 9999px rgba(0,96,180,.17)}
}

/* =========================================================================
   PAGE DE SERVICE
   Même planche, moins de bruit : un fil d'Ariane, l'énoncé et sa
   photographie, les phases SIA où le service est engagé, puis les autres.
   ========================================================================= */
.page-sv .sv-t{padding-top:clamp(104px,10vw,132px)}
.fil{display:flex;gap:9px;align-items:center;font-size:var(--t3);color:var(--enc-3);
  font-variation-settings:'wdth' 86;margin-bottom:clamp(22px,3vw,40px)}
.fil a{color:var(--enc-3);text-decoration:none;border-bottom:1px solid transparent}
.fil a:hover{color:var(--cob);border-bottom-color:var(--cyan)}
/* l'énoncé au centre de la hauteur de la photographie : en l'alignant en
   tête, un portrait 4/5 laissait deux cents pixels de vide sous le texte */
.sv-t__g{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(30px,4.4vw,72px);align-items:center}
.sv-t__h{margin:14px 0 18px;text-transform:uppercase;letter-spacing:-.014em;
  font-variation-settings:'wdth' 86;font-size:clamp(var(--d1),3.4vw,var(--d4));line-height:1.05}
.sv-t__ch{margin:0;font-size:clamp(var(--t8),1.3vw,var(--t9));line-height:1.6;color:var(--enc-2);max-width:46ch}
.sv-t__ch--s{margin-top:14px}
.sv-t__r{margin:24px 0 0;font-size:var(--t5);line-height:1.6;color:var(--enc-3);
  border-top:1px solid var(--filet);padding-top:16px;max-width:46ch}
.sv-t__r b{display:block;font-variation-settings:'wdth' 80;font-weight:700;font-size:var(--t1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--cob);margin-bottom:5px}
.sv-t__f{margin:0;max-width:460px;margin-inline-start:auto}
.sv-t__f .fen__i{aspect-ratio:4/5}
@media (max-width:900px){
  .sv-t__g{grid-template-columns:1fr;gap:28px}
  .sv-t__f{max-width:none}
  .sv-t__f .fen__i{aspect-ratio:3/2}
}

/* les phases : une colonne de numéros, comme une notice */
.svp{background:var(--pap-b);border-block:1px solid var(--filet)}
.svp__l{list-style:none;margin:0;padding:0;display:grid;gap:0}
.svp__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,40px);
  padding:clamp(22px,2.6vw,34px) 0;border-top:1px solid var(--filet)}
.svp__i:last-child{border-bottom:1px solid var(--filet)}
.svp__n{font-variation-settings:'wdth' 78;font-weight:700;font-size:var(--t9);
  color:var(--cob);line-height:1;min-width:2.2ch}
.svp__t{margin:0;font-size:var(--t8);line-height:1.2;text-transform:uppercase;
  letter-spacing:-.006em;font-variation-settings:'wdth' 88}
.svp__s{margin:5px 0 0;font-size:var(--t3);color:var(--enc-3);font-variation-settings:'wdth' 86}
.svp__r{margin:13px 0 0;font-size:var(--t6);line-height:1.62;color:var(--enc-2);max-width:62ch}
.svp__e{display:block;margin:20px 0 8px}

/* les autres services : une liste de renvois, pas des cartes */
.sva__l{list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,52px)}
.sva__l a{display:block;text-decoration:none;padding:17px 0;border-top:1px solid var(--filet);
  transition:color .16s}
.sva__t{display:block;font-weight:650;font-size:var(--t6);color:var(--enc);
  font-variation-settings:'wdth' 90;margin-bottom:3px}
.sva__d{display:block;font-size:var(--t4);line-height:1.5;color:var(--enc-3)}
.sva__l a:hover .sva__t{color:var(--cob)}
.sva__l a:hover .sva__d{color:var(--enc-2)}
@media (max-width:760px){.sva__l{grid-template-columns:1fr}}

/* --- champs et sections --------------------------------------------------- */
.champ{background:var(--cob);color:#fff}
.champ .et{color:var(--sur-c3)}
.champ .clause{color:var(--cyan)}
.champ a:not(.bt):not(.lien-f){color:#fff}
.sect{padding-block:clamp(64px,8vw,124px);position:relative;z-index:2}
.sect--serre{padding-block:clamp(48px,6vw,88px) clamp(38px,4.4vw,64px)}
.sect--suite{padding-top:clamp(46px,5.4vw,78px)}

.entete-s{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(28px,4vw,52px);padding-bottom:16px;border-bottom:1.5px solid var(--filet-f)}
.champ .entete-s{border-bottom-color:rgba(255,255,255,.28)}
.entete-s__t{max-width:min(100%,780px)}

h1,h2,h3,h4{margin:0;font-weight:700;text-wrap:balance}
h1{
  font-variation-settings:'wdth' 86;font-weight:700;
  font-size:clamp(var(--d3),4.7vw,var(--d6));line-height:1.03;letter-spacing:-.026em;
}
h2{
  font-variation-settings:'wdth' 88;font-weight:650;
  font-size:clamp(var(--d1),3.1vw,var(--d4));line-height:1.07;letter-spacing:-.021em;
}
h3{font-variation-settings:'wdth' 92;font-weight:600;font-size:var(--t9);line-height:1.3;letter-spacing:-.008em}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
.chapeau{font-size:clamp(var(--t7),1.5vw,var(--t10));line-height:1.58;color:var(--enc-2)}
.champ .chapeau{color:var(--sur-c)}
/* second alinéa du chapeau : même voix, simple respiration entre les deux */
.chapeau--s{margin-top:clamp(14px,1.5vw,20px)}

/* --- boutons -------------------------------------------------------------- */
.bt{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  padding:14px 24px;font-weight:600;font-size:var(--t6);font-variation-settings:'wdth' 92;
  border:1.5px solid transparent;border-radius:var(--r-t);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.bt svg{flex:0 0 auto;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.bt:hover svg{transform:translateX(4px)}
.bt--co{background:var(--cob);color:#fff;border-color:var(--cob)}
.bt--co:hover{background:var(--cob-f);border-color:var(--cob-f)}
.bt--pl{background:#fff;color:var(--cob);border-color:#fff}
.bt--pl:hover{background:var(--cyan);border-color:var(--cyan);color:var(--sur-cy)}
.bt--cr{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.bt--cr:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.bt--cr:hover{border-color:var(--cyan);color:var(--cyan)}
.bt--enc{background:var(--cob);color:#fff;border-color:var(--cob)}
.bt--enc:hover{background:var(--cob-f);border-color:var(--cob-f)}
.bt--ct{background:transparent;color:var(--cob);border-color:var(--filet-f)}
.bt--ct:hover{border-color:var(--cob);background:var(--pap-b)}
.lien-f{
  text-decoration:none;font-weight:600;font-size:var(--t5);font-variation-settings:'wdth' 90;
  color:var(--cob);border-bottom:1.5px solid var(--cyan);padding-bottom:2px;
  display:inline-flex;align-items:center;gap:8px;transition:color .16s;white-space:nowrap;
}
.champ .lien-f{color:#fff;border-bottom-color:var(--cyan)}
.lien-f:hover{color:var(--cob-f)}
.champ .lien-f:hover{color:var(--cyan)}

/* --- la fenêtre : le seul contenant d'image ------------------------------- */
.fen{background:var(--pap-b);padding:9px;position:relative}
.fen__i{position:relative;overflow:hidden;background:var(--pap-z)}
.fen__i img{width:100%;height:100%;object-fit:cover;display:block}
.fen__c{
  display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  padding:9px 2px 1px;font-size:var(--t3);line-height:1.4;color:var(--enc-3);
  font-variation-settings:'wdth' 86;border-top:1px solid var(--filet);margin-top:9px;
}
.fen__c b{font-weight:600;color:var(--enc-2);font-variation-settings:'wdth' 84}

/* =========================================================================
   1 · OUVERTURE
   ========================================================================= */
/* La photographie tient tout le fond de l'ouverture ; le texte se pose dessus.
   Un voile cobalt foncé, plus dense à gauche, garantit la lecture du titre
   sans éteindre l'image à droite.                                          */
.ouv{position:relative;isolation:isolate;overflow:hidden}
.ouv__f{position:absolute;inset:0;z-index:0}
.ouv__f img{width:100%;height:100%;object-fit:cover;display:block}
.ouv__f::after{
  content:'';position:absolute;inset:0;
  background:
    /* la droite reprend un peu de lumière : l'image y respire */
    linear-gradient(90deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.09) 100%),
    /* la nuit tient la gauche, où se lit le titre, puis se retire */
    linear-gradient(96deg, rgba(3,19,38,.96) 0%,  rgba(3,19,38,.90) 26%,
                           rgba(4,23,45,.44) 54%, rgba(4,23,45,.12) 78%,
                           rgba(4,23,45,0)   100%),
    /* un pied juste assez sombre pour porter les chiffres */
    linear-gradient(to top, rgba(2,17,34,.80) 0%, rgba(2,17,34,0) 34%);
}
.ouv__in{
  position:relative;z-index:1;
  min-height:100vh;
  min-height:100svh;             /* barres du navigateur mobile comprises */
  display:grid;grid-template-rows:1fr auto;
  /* la barre est posée dessus : on lui laisse sa hauteur */
  padding-block:calc(72px + clamp(28px,4.4vw,64px)) 0;
}
.ouv__t{max-width:min(100%, 920px);align-self:center}
.ouv__b{align-self:end}

@media (max-width:760px){
  .ouv__in{min-height:100svh;padding-block:calc(62px + 20px) 0}
  .ouv__f::after{background:
    linear-gradient(to top, rgba(2,20,40,.92) 0%, rgba(2,20,40,.78) 46%, rgba(2,22,44,.6) 100%)}
  /* moins de texte à l'écran : lignes plus courtes, échelle resserrée */
  .ouv h1{font-size:clamp(1.9rem,8.6vw,2.5rem);letter-spacing:-.028em}
  .ouv__ch{font-size:var(--t7);line-height:1.55;max-width:none;margin-bottom:28px}
  .ouv__a{gap:10px}
  .ouv__a .bt{flex:1 1 auto;justify-content:center;padding:13px 16px;font-size:var(--t5)}
  .ouv__b{margin-top:26px}
}
.ouv__b{margin-top:clamp(44px,5.5vw,72px)}
.ouv .datum{margin-top:0}
/* la provenance suisse, glissée sous les dix ans de pratique */
.datum dd.datum__ch{
  display:inline-flex;align-items:center;gap:7px;margin:8px 0 0;
  color:#fff;font-variation-settings:'wdth' 80;font-weight:600;font-size:var(--t1);
  letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;
}
@media (max-width:560px){.datum__ch{letter-spacing:.12em}}
.ouv h1{margin-bottom:24px}
.ouv__ch{font-size:clamp(var(--t7),1.3vw,var(--t9));line-height:1.6;color:rgba(255,255,255,.84);
  max-width:46ch;margin-bottom:36px}
.ouv__a{display:flex;flex-wrap:wrap;gap:12px}

/* bandeau de données sous l'ouverture — registre cartouche, pas « stats row » */
.datum{border-top:1px solid rgba(255,255,255,.22);display:grid;
  grid-template-columns:repeat(4,1fr);margin-top:clamp(44px,5.5vw,72px)}
.datum div{padding:16px 20px 18px 0;border-right:1px solid rgba(255,255,255,.18)}
.datum div:first-child{padding-left:0}
.datum div:not(:first-child){padding-left:20px}
.datum div:last-child{border-right:0}
.datum dt{
  font-variation-settings:'wdth' 86;font-weight:700;font-size:var(--t10);line-height:1.2;
  letter-spacing:-.012em;color:#fff;margin-bottom:6px;text-wrap:balance;
}
.datum dd{margin:0;font-variation-settings:'wdth' 84;font-weight:500;font-size:var(--t3);
  line-height:1.35;color:var(--sur-c3)}
/* Sur téléphone, l'ouverture doit tenir en un regard : le bandeau de données
   est réduit à sa première entrée. Les trois autres ne disent rien qui ne soit
   dit ailleurs — la couverture nationale dans la fiche du siège, le périmètre
   dans « Le bureau ». Restent les dix ans de pratique et la provenance.     */
@media (max-width:620px){
  .ouv .datum{grid-template-columns:1fr}
  .ouv .datum div:not(:first-child){display:none}
  .ouv .datum div:first-child{border-right:0}
  .ouv__b{margin-top:clamp(28px,6vw,44px)}
}
@media (max-width:760px){
  .datum{grid-template-columns:1fr 1fr}
  .datum div{padding:11px 12px 12px 0}
  .datum div:nth-child(2n){border-right:0}
  .datum div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}
  .datum div:nth-child(2n+1){padding-left:0}
  .datum dt{font-size:var(--t6);line-height:1.22;margin-bottom:3px}
  .datum dd{font-size:var(--t2);line-height:1.3}
  .datum dd.datum__ch{font-size:var(--t1);letter-spacing:.13em;margin-top:6px}
}

/* =========================================================================
   2 · NOTRE SECTEUR D'ACTIVITÉ — l'énoncé du métier, sur la photographie
   ========================================================================= */
.act{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(104deg, #04182F 0%, var(--cob-p) 62%, #024A86 100%)}
/* La section porte déjà sa respiration (.sect) : pas de second rembourrage.
   L'énoncé à gauche, la vue maquette → réalisé à droite : la bande tient la
   largeur, et la démonstration arrive avant tout discours.                 */
.act__in{
  position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4.4vw,72px);
}
.act .clause{color:var(--cyan)}
/* Le titre a beaucoup grandi en nombre de mots : les capitales en feraient un
   mur. Il passe en bas de casse, à la casse que vous avez écrite.          */
.act__h{
  margin:14px 0 0;
  letter-spacing:-.016em;font-variation-settings:'wdth' 86;
  font-size:clamp(var(--d1),3.2vw,var(--d4));line-height:1.08;
}
.act__p{
  margin:22px 0 0;max-width:52ch;font-size:clamp(var(--t7),1.2vw,var(--t8));
  line-height:1.66;color:rgba(255,255,255,.86);
}
.act__f{margin:0}
/* la légende est posée sur fond sombre : le filet et l'encre s'éclaircissent */
.act__lg{border-top-color:rgba(255,255,255,.24);color:var(--sur-c3)}
@media (max-width:900px){
  .act__in{grid-template-columns:1fr;gap:26px}
  .act__p{max-width:none}
}

/* --- domaines d'intervention ----------------------------------------------
   Un index de dossier, pas une liste à puces : huit cellules de planche
   blanche jointives, séparées par le seul filet, chacune numérotée comme
   une clause. Le visiteur reconnaît son secteur d'un coup d'œil, et le bloc
   pèse enfin autant que ce qu'il annonce.                                 */
.dom{margin-top:clamp(30px,3.6vw,48px)}
.dom__e{
  display:flex;align-items:baseline;gap:14px;
  padding:0 0 12px;border-bottom:1.5px solid var(--filet-f);
}
.dom__t{
  margin:0;
  font-variation-settings:'wdth' 80;font-weight:700;font-size:var(--t2);
  letter-spacing:.11em;text-transform:uppercase;color:var(--enc-3);
}
/* La grille est un tableau. Chaque cellule porte son propre filet en halo de
   1px, exactement de la largeur de l'écart : les halos voisins se recouvrent,
   le trait reste unique, et « overflow:hidden » les coupe à l'intérieur du
   bord du bloc. Conséquence utile : une dernière rangée incomplète reste
   blanche au lieu de laisser paraître un aplat de filet, quel que soit le
   nombre de domaines ou de colonnes.                                      */
.dom__l{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--pap-b);overflow:hidden;
  border:1.5px solid var(--filet-f);border-top:0;
}
.dom__l li{
  background:var(--pap-b);transition:background-color .18s;
  box-shadow:0 0 0 1px var(--filet);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(9px,1vw,13px);
  padding:clamp(15px,1.7vw,22px) clamp(15px,1.7vw,22px) clamp(17px,1.9vw,24px);
  font-size:var(--t6);line-height:1.3;font-weight:600;
  font-variation-settings:'wdth' 92;color:var(--enc);
  text-wrap:balance;
}
/* Le pictogramme remplace le numéro : il se lit sans traduction. Tracé dans
   le trait de la planche, souligné du filet cyan comme l'était la clause.  */
.dom__l .pic{
  width:30px;height:30px;color:var(--cob);flex:0 0 auto;
  padding-bottom:9px;border-bottom:2px solid var(--cyan);
  box-sizing:content-box;transition:color .18s;
}
.dom__l li:hover{background:var(--hach-b)}
.dom__l li:hover .pic{color:var(--cyan)}
@media (max-width:1080px){.dom__l{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.dom__l{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* en colonne unique, la clause repasse en tête de ligne : huit lignes de
   registre plutôt que huit blocs empilés, et la section reste parcourable */
@media (max-width:460px){
  .dom__l{grid-template-columns:1fr}
  .dom__l li{
    flex-direction:row;align-items:center;gap:14px;
    padding:13px 16px 15px;
  }
  .dom__l .pic{width:24px;height:24px;padding-bottom:0;border-bottom:0;
    border-inline-end:2px solid var(--cyan);padding-inline-end:12px}
}

/* --- cas concret ----------------------------------------------------------
   Le titre qui introduit les deux cartes : ce que les pictogrammes annoncent,
   montré en bâtiment et en industrie.                                     */
/* Le sélecteur porte le « p » à dessein : ce titre est le dernier enfant de
   son enveloppe, et la règle de base « p:last-child{margin-bottom:0} » —
   plus spécifique qu'une simple classe — écrasait sinon la marge basse, si
   bien que les cartes montaient coller le libellé.                       */
p.cas__t{
  margin:clamp(30px,3.6vw,48px) 0 clamp(40px,3.4vw,52px);
  border-top:1.5px solid var(--filet-f);padding-top:clamp(22px,2.6vw,34px);
}

/* =========================================================================
   3 · SECTEURS
   ========================================================================= */
.sect-g{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:900px){.sect-g{grid-template-columns:1fr}}
.sect-c{padding:clamp(34px,4.2vw,64px) clamp(24px,3.4vw,56px)}
.sect-c--pap{background:var(--pap-b)}
.sect-c--cob{background:var(--cob);color:#fff}
.sect-c h3{font-size:clamp(var(--t11),2.3vw,var(--d2));font-variation-settings:'wdth' 88;font-weight:650;
  letter-spacing:-.017em;line-height:1.1;margin:14px 0 14px}
.sect-c p{font-size:var(--t7);line-height:1.6;color:var(--enc-2);max-width:46ch}
.sect-c--cob p{color:var(--sur-c)}
.sect-c .fen{padding:0;background:transparent;margin-bottom:24px}
.sect-c .fen__i{aspect-ratio:16/10}
.sect-c--cob .fen__c{color:var(--sur-c3);border-top-color:rgba(255,255,255,.24)}
.sect-c--cob .fen__c b{color:#fff}
.detail{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--filet)}
.sect-c--cob .detail{border-top-color:rgba(255,255,255,.26)}
.detail li{padding:9px 0;border-bottom:1px solid var(--filet);font-size:var(--t5);line-height:1.45;
  display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:baseline;color:var(--enc-2)}
.sect-c--cob .detail li{border-bottom-color:rgba(255,255,255,.18);color:var(--sur-c)}
.detail li::before{content:'';width:6px;height:6px;background:var(--cob);transform:translateY(-1px)}
.sect-c--cob .detail li::before{background:var(--cyan)}

/* =========================================================================
   4 · TABLEAU DES PRESTATIONS — le passage dense
   ========================================================================= */
/* =========================================================================
   5 · JUMEAU NUMÉRIQUE
   ========================================================================= */
.jn{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,4.6vw,68px);align-items:center}
/* La maquette tient seule dans la fenêtre : le relevé ne met plus le modèle
   en regard d'une photographie, il montre le modèle. Le fond blanc de la
   fenêtre prolonge celui de l'image, le cadre disparaît dans le rendu.   */
.fen--jn .fen__i{aspect-ratio:16/9;background:var(--pap-b)}
@media (max-width:940px){.jn{grid-template-columns:1fr;gap:32px}}
/* --- maquette → réalité ---------------------------------------------------
   Deux couches superposées : sous la coupe, la photographie de l'installation
   construite ; au-dessus, la maquette numérique. La position de la coupe
   (--p, de 1 « tout maquette » à 0 « tout réalité ») se tire à la poignée.    */
.mr{background:var(--scan-c);padding:9px;position:relative}
.mr-w{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--scan-f);--p:1}
.mr picture{display:contents}
.mr-ph,.mr-mq{position:absolute;inset:0;width:100%;height:100%;display:block}
.mr-ph{object-fit:cover}
/* la maquette est une planche : elle se pose en entier, sur son fond de papier */
.mr-mq{object-fit:contain;background:var(--pap-b);clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0)}

/* Variante « même point de vue » : les deux vues sont prises du même endroit
   et ramenées au même cadre — la maquette se pose donc comme la photographie,
   en couvrant le cadre, et non comme une planche sur son fond de papier.   */
.mr-w--vue{aspect-ratio:14/13}
.mr-w--vue .mr-mq{object-fit:cover;background:none}
.mr-w--vue .mr-et--m{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* le trait de coupe, et la poignée qui le tire */
.mr-w{cursor:ew-resize}
.mr-tr{position:absolute;top:0;bottom:0;left:calc(var(--p) * 100%);width:2px;margin-left:-1px;
  background:var(--cyan);box-shadow:0 0 22px 3px rgba(12,168,228,.55);pointer-events:none}
.mr-h{
  position:absolute;top:50%;left:calc(var(--p) * 100%);width:46px;height:46px;margin:-23px 0 0 -23px;
  display:grid;place-items:center;padding:0;border-radius:50%;cursor:ew-resize;touch-action:none;
  background:var(--pap-b);border:1.5px solid var(--cyan);color:var(--cob);
  box-shadow:0 3px 16px rgba(4,16,28,.42);transition:transform .18s;
}
.mr-h svg{width:21px;height:21px}
.mr-h:hover,.mr-h:active{transform:scale(1.08)}
.mr-h:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
/* l'astuce ne paraît qu'au premier regard : elle s'efface dès qu'on a saisi */
.mr-astuce{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:rgba(4,16,28,.74);color:#fff;padding:6px 13px;border-radius:999px;
  font-size:var(--t2);font-weight:600;font-variation-settings:'wdth' 84;letter-spacing:.02em;
  white-space:nowrap;pointer-events:none;transition:opacity .3s;
}
.mr-w.mr-w--pris .mr-astuce{opacity:0}
@media (prefers-reduced-motion:reduce){.mr-h{transition:none}}

/* Chaque étiquette appartient à sa couche : elle est clippée par la même coupe,
   et se retire donc au passage du front, sans se superposer à l'autre côté. */
.mr-cq,.mr-cr{position:absolute;inset:0;pointer-events:none}
.mr-cq{clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0)}
.mr-cr{clip-path:inset(0 0 0 calc(var(--p) * 100%))}
.mr-et{position:absolute;bottom:11px;display:flex;gap:7px;align-items:center;
  font-variation-settings:'wdth' 78;font-weight:600;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap}
.mr-et--m{left:11px;color:var(--cob);opacity:calc((var(--p) - .28) * 6)}
.mr-et--r{right:11px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7);
  opacity:calc((.72 - var(--p)) * 6)}
.usages{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(22px,2.6vw,38px);margin-top:30px;padding:0;
  border-top:1px solid rgba(255,255,255,.24)}
.usages li{list-style:none;padding:14px 18px 16px 0;border-bottom:1px solid rgba(255,255,255,.18);
  font-size:var(--t5);line-height:1.45;color:var(--sur-c)}
@media (max-width:560px){.usages{grid-template-columns:1fr}}

/* --- l'outil, nommé -------------------------------------------------------
   Le logo de l'éditeur est bleu : posé à même le champ cobalt il se perdrait.
   Il tient donc sur une plaque de papier, au même titre qu'une fenêtre, et
   reste à la taille d'une mention — la maquette est le sujet, pas l'outil. */
.outil{display:flex;align-items:center;gap:15px;width:fit-content;max-width:100%;
  margin:30px 0 0;padding-block:13px;padding-inline:14px 18px;background:var(--pap-b)}
.outil picture{display:contents}
.outil img{width:40px;height:auto;flex:none;display:block}
.outil figcaption{min-width:0}
.outil__t{display:block;font-size:var(--t1);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-variation-settings:'wdth' 78;color:var(--enc-3)}
.outil__p{display:block;margin-top:3px;font-size:var(--t5);line-height:1.45;color:var(--enc-2)}

/* =========================================================================
   6 · CARTE DES RÉFÉRENCES
   ========================================================================= */
.carte-g{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--filet-f);background:var(--pap-b)}
@media (max-width:940px){.carte-g{grid-template-columns:1fr}}
.carte-w{position:relative;padding:clamp(10px,1.6vw,22px)}
/* Le cadrage se resserre quand on choisit un repère : sans coupe, le pays
   se dessinerait par-dessus le panneau et le reste de la page. La marge
   laisse passer le liseré du contour, qui mord d'un cheveu sur le bord. */
.carte-w svg{width:100%;height:auto;display:block;overflow:hidden;
  overflow:clip;overflow-clip-margin:3px}
.ch-canton{fill:var(--carte-t);stroke:var(--carte-f);stroke-width:.8;vector-effect:non-scaling-stroke}
.ch-lac{fill:var(--carte-l);stroke:var(--carte-lf);stroke-width:.7;vector-effect:non-scaling-stroke;pointer-events:none}
.ch-bord{fill:none;stroke:var(--enc);stroke-width:1.7;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;pointer-events:none}
.mk{cursor:pointer}
.mk__c{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.mk__d{stroke-width:1.2;vector-effect:non-scaling-stroke}
.mk--bat .mk__c,.mk--bat .mk__d{stroke:var(--cob)}
.mk--bat .mk__p{fill:var(--cob)}
/* Bâtiment : anneau creux. Industrie : disque plein à cœur blanc. La forme
   porte la distinction à elle seule — la couleur ne fait que la confirmer. */
.mk--ind .mk__c,.mk--ind .mk__d{stroke:var(--ind)}
.mk--ind .mk__c{fill:var(--ind)}
.mk--ind .mk__p{fill:#fff;r:var(--pt-ind,2.6px)}
/* commune qui porte à la fois du bâtiment et de l'industrie */
.mk--mix .mk__c,.mk--mix .mk__d{stroke:var(--cob)}
.mk--mix .mk__p{fill:var(--ind)}
.mk--sg .mk__c,.mk--sg .mk__d{stroke:var(--enc)}
.mk--sg .mk__p{fill:var(--enc)}
.mk__h{fill:transparent;stroke:none}
.mk:hover .mk__c,.mk[aria-pressed="true"] .mk__c{stroke-width:3;vector-effect:non-scaling-stroke}
.mk:focus-visible{outline:none}
.mk:focus-visible .mk__c{stroke:var(--cyan);stroke-width:3.5;vector-effect:non-scaling-stroke}
.mk__r{fill:none;stroke:var(--filet-f);stroke-width:1;vector-effect:non-scaling-stroke}
.mk:hover .mk__r,.mk[aria-pressed="true"] .mk__r{stroke:var(--cob)}
.mk--ind:hover .mk__r,.mk--ind[aria-pressed="true"] .mk__r{stroke:var(--ind)}
.mk--sg:hover .mk__r,.mk--sg[aria-pressed="true"] .mk__r{stroke:var(--enc)}
.mk__t{font-family:inherit;font-size:var(--lab,var(--t2));font-weight:600;fill:var(--enc-2);
  font-variation-settings:'wdth' 84;pointer-events:none;letter-spacing:.005em}
.mk__t--h{stroke:#fff;stroke-width:3.5;stroke-linejoin:round;paint-order:stroke}
.mk:hover .mk__t,.mk[aria-pressed="true"] .mk__t{fill:var(--cob)}
.mk--sg:hover .mk__t,.mk--sg[aria-pressed="true"] .mk__t{fill:var(--enc)}
.mk[aria-pressed="true"] .mk__t{font-weight:700}
/* Le rayon des repères est piloté par le script : quand la carte se resserre
   sur la région, il le corrige pour que le repère garde la même taille à
   l'écran. Les valeurs ci-dessous sont celles de l'écran large.          */
.mk__halo{fill:#fff;stroke:none;r:var(--halo,0)}
.mk__c{r:var(--rad,7px)}
.mk__p{r:var(--pt,2.2px)}
.mk__h{r:var(--hit,17px)}

/* Le pays entier tient mal sur un téléphone : quatre repères dans un coin.
   Ce bouton bascule vers un cadrage sur la région, et revient. Il n'existe
   que sur petit écran — sur grand, les étiquettes font déjà le travail.  */
.carte-zoom{
  display:none;position:absolute;top:14px;right:10px;z-index:2;
  font:inherit;font-size:var(--t3);font-variation-settings:'wdth' 86;font-weight:600;
  padding:7px 12px;border:1px solid var(--filet-f);background:rgba(255,255,255,.94);
  color:var(--cob);cursor:pointer;transition:border-color .16s,background-color .16s;
}
.carte-zoom:hover{border-color:var(--cob)}
.carte-zoom:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.carte-zoom[aria-pressed="true"]{background:var(--cob);border-color:var(--cob);color:#fff}
@media (max-width:760px){.carte-zoom{display:block}}
/* Sur grand écran il n'apparaît qu'une fois la carte approchée sur une
   commune : c'est le seul chemin de retour vers la vue d'ensemble.    */
.carte-zoom[data-actif]{display:block}

.carte-lg{position:absolute;left:clamp(16px,2vw,30px);bottom:clamp(14px,2vw,26px);
  display:flex;gap:16px;flex-wrap:wrap;background:rgba(255,255,255,.94);
  border:1px solid var(--filet);padding:8px 12px}
/* sur petit écran les étiquettes SVG deviennent illisibles : l'index sous la
   carte prend le relais. Ces règles viennent après la règle générale, sinon
   elles ne s'appliqueraient jamais — même spécificité, c'est la dernière
   écrite qui l'emporte, et la légende resterait posée sur la carte.      */
@media (max-width:760px){
  .mk__t,.mk__r{display:none}
  .mk__c{stroke-width:2.4}
  .carte-w{padding:14px 10px 0}
  .carte-lg{position:static;border:0;border-top:1px solid var(--filet);
    background:transparent;padding:11px 10px;justify-content:space-between}
}
.carte-lg span{display:flex;align-items:center;gap:7px;font-size:var(--t3);color:var(--enc-2);
  font-variation-settings:'wdth' 86}
.carte-lg i{width:9px;height:9px;border:1.6px solid var(--cob);border-radius:50%;flex:0 0 auto}
.carte-lg i.ind{border-color:var(--ind);background:var(--ind)}
.carte-lg i.sg{border-color:var(--enc);background:var(--enc)}
.carte-p{border-left:1px solid var(--filet);display:flex;flex-direction:column;min-height:0}
@media (max-width:940px){.carte-p{border-left:0;border-top:1px solid var(--filet)}}
.carte-p__h{padding:18px 20px 15px;border-bottom:1px solid var(--filet)}
.carte-p__b{padding:18px 20px 22px;overflow-y:auto;flex:1 1 auto}
.carte-x{list-style:none;margin:0;padding:14px 20px 20px;border-top:1px solid var(--filet);background:var(--pap)}
.carte-x > .et{margin-bottom:8px;display:block}
.carte-x button{
  display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:baseline;width:100%;
  background:none;border:0;border-bottom:1px solid var(--filet);padding:9px 0;cursor:pointer;
  font:inherit;font-size:var(--t4);line-height:1.35;text-align:left;color:var(--enc-2);transition:color .16s;
}
.carte-x li:last-child button{border-bottom:0}
.carte-x button:hover{color:var(--cob)}
.carte-x button::before{content:'';width:8px;height:8px;border:1.6px solid currentColor;border-radius:50%;
  transform:translateY(-1px)}
.carte-x button[aria-current="true"]{color:var(--cob);font-weight:650}
.carte-x button[aria-current="true"]::before{background:var(--cob);border-color:var(--cob)}
.carte-p h3{font-size:var(--t8);line-height:1.25;margin:7px 0 6px}
.carte-p .fen{padding:0;margin:0 0 13px}
.carte-p .fen__i{aspect-ratio:4/3}
.carte-p p{font-size:var(--t5);line-height:1.55;color:var(--enc-2)}

/* La commune porte plusieurs sites : on passe de l'un à l'autre sans quitter
   le repère. Rangée de libellés courts, celui qui est ouvert est plein.    */
.rp-s{margin:0 0 13px}
.rp-s > .et{display:block;margin-bottom:7px}
.rp-s__l{display:flex;flex-wrap:wrap;gap:6px}
.rp-s__l button{
  font:inherit;font-size:var(--t3);font-variation-settings:'wdth' 86;
  padding:5px 11px;border:1px solid var(--filet-f);background:var(--pap-b);
  color:var(--enc-2);cursor:pointer;transition:border-color .16s,color .16s;
}
.rp-s__l button:hover{border-color:var(--cob);color:var(--cob)}
.rp-s__l button[aria-current="true"]{background:var(--cob);border-color:var(--cob);color:#fff}
.rp-s__l button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* La série du site : la vue en grand, puis la bande de vignettes. */
.rp-v{display:flex;flex-wrap:wrap;gap:6px;padding:9px 0 1px}
.rp-v button{
  flex:0 0 auto;width:54px;height:54px;padding:0;border:1px solid var(--filet-f);
  background:none;cursor:pointer;overflow:hidden;opacity:.62;transition:opacity .16s,border-color .16s;
}
.rp-v button img{width:100%;height:100%;object-fit:cover;display:block}
.rp-v button:hover{opacity:1}
.rp-v button[aria-current="true"]{opacity:1;border-color:var(--cob);border-width:2px}
.rp-v button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* L'index reprend le groupement de la carte : une commune, ses sites. */
.carte-x__v{
  margin:11px 0 3px;font-size:var(--t2);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-variation-settings:'wdth' 78;color:var(--enc-3);
}
.carte-x__v:first-of-type{margin-top:0}
.puce{display:inline-block;font-variation-settings:'wdth' 78;font-weight:700;font-size:var(--t1);
  letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor}
.puce--bat{color:var(--cob)}
.puce--ind{color:var(--ind)}
.puce--sg{color:var(--enc)}

/* avis « à compléter » — signalé par la hachure de révision d'une planche,
   jamais par une barre d'accent latérale. */
.avis{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  background:var(--pap-b);border:1px solid var(--enc-3);
  padding:16px 20px 16px 34px;font-size:var(--t5);line-height:1.55;color:var(--enc-2);margin-top:20px;
}
.avis::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:16px;
  background:repeating-linear-gradient(-45deg,
    var(--amb-f) 0 3px, transparent 3px 7px);
  border-right:1px solid var(--enc-3);
}
.avis b{display:block;color:var(--amb);font-variation-settings:'wdth' 82;font-weight:700;
  font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.avis__i{font-variation-settings:'wdth' 78;font-weight:700;color:var(--amb);font-size:var(--t6);line-height:1.4}

/* =========================================================================
   7 · LE BUREAU
   ========================================================================= */
/* l'étiquette « Notre approche » ouvre la liste : elle doit tenir contre le
   filet de tête, pas flotter à mi-distance des deux blocs */
.approche{list-style:none;margin:clamp(34px,4.5vw,60px) 0 0;padding:0;
  border-top:1.5px solid var(--filet-f)}
.et + .approche{margin-top:clamp(12px,1.4vw,18px)}
.approche li{padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--filet)}
.approche h3{margin-bottom:8px}
.approche p{font-size:var(--t6);line-height:1.6;color:var(--enc-2);max-width:58ch}

/* =========================================================================
   8 · CONTACT
   ========================================================================= */
.ct{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,76px);align-items:start}
@media (max-width:940px){.ct{grid-template-columns:1fr}}
.coord{list-style:none;margin:30px 0 0;padding:0;border-top:1.5px solid var(--filet-f)}
.coord li{padding:16px 0;border-bottom:1px solid var(--filet)}
.coord dt{font-variation-settings:'wdth' 80;font-weight:600;font-size:var(--t2);letter-spacing:.1em;
  text-transform:uppercase;color:var(--enc-3);margin-bottom:6px}
.coord dd{margin:0;font-size:var(--t7);line-height:1.55}
.coord a{color:var(--cob);text-decoration:none;border-bottom:1px solid var(--filet-f)}
.coord a:hover{border-bottom-color:var(--cob)}

form.dem{background:var(--pap-b);border:1px solid var(--filet-f);padding:clamp(24px,3.2vw,42px)}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.champs{grid-template-columns:1fr}}
.f{display:block}
.f > span{display:block;font-variation-settings:'wdth' 82;font-weight:600;font-size:var(--t3);
  letter-spacing:.06em;text-transform:uppercase;color:var(--enc-2);margin-bottom:7px}
.f > span i{color:var(--cob);font-style:normal}
.f input,.f textarea,.f select{
  width:100%;padding:11px 13px;border:1px solid var(--filet-f);background:var(--pap);
  font:inherit;font-size:var(--t6);color:var(--enc);border-radius:0;
  transition:border-color .16s,background .16s;
}
.f textarea{resize:vertical;min-height:118px;line-height:1.55}
.f input:hover,.f textarea:hover,.f select:hover{border-color:var(--enc-3)}
.f input:focus,.f textarea:focus,.f select:focus{
  outline:none;border-color:var(--cob);background:var(--pap-b);box-shadow:inset 0 -2px 0 var(--cyan);
}
.f input::placeholder,.f textarea::placeholder{color:var(--indice)}
.f input:user-invalid,.f textarea:user-invalid{border-color:var(--err);background:var(--err-f)}
.f .err{display:none;font-size:var(--t3);color:var(--err-t);margin-top:5px;font-variation-settings:'wdth' 90}
.f input:user-invalid ~ .err,.f textarea:user-invalid ~ .err{display:block}
.plein{grid-column:1/-1}
.radios{display:flex;gap:0;border:1px solid var(--filet-f);flex-wrap:wrap}
.radios label{
  flex:1 1 140px;display:flex;align-items:center;gap:9px;padding:11px 15px;cursor:pointer;
  font-size:var(--t5);border-right:1px solid var(--filet-f);transition:background .16s;
}
.radios label:last-child{border-right:0}
.radios label:hover{background:var(--pap)}
.radios input{accent-color:var(--cob);margin:0;width:15px;height:15px}
.radios label:has(input:checked){background:var(--cob);color:#fff}
.radios label:has(input:checked) input{accent-color:#fff}
.radios label:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:-2px}
.note-f{font-size:var(--t3);line-height:1.55;color:var(--enc-3);margin-top:16px}

/* =========================================================================
   9 · CARTOUCHE
   ========================================================================= */
.cartouche{background:var(--cob-p);color:#fff}
.cart__g{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,.9fr);
  gap:0;border-bottom:1px solid rgba(255,255,255,.2)}
@media (max-width:900px){.cart__g{grid-template-columns:1fr}}
.cart__c{padding:clamp(28px,3.4vw,44px) clamp(22px,2.6vw,38px);border-right:1px solid rgba(255,255,255,.2)}
.cart__c:last-child{border-right:0}
@media (max-width:900px){
  .cart__c{border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
  .cart__c:last-child{border-bottom:0}
}
.cart__c img{height:66px;width:auto;margin-bottom:18px}
.cart__v{height:104px!important;margin-bottom:20px!important}
.cart__c p{font-size:var(--t5);line-height:1.6;color:var(--sur-c);max-width:34ch}
.cart__t{font-variation-settings:'wdth' 80;font-weight:600;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.cart__l{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.cart__l a{font-size:var(--t5);color:var(--sur-c);text-decoration:none;transition:color .16s}
.cart__l a:hover{color:var(--cyan)}
.cart__f{display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.cart__f{grid-template-columns:1fr 1fr}}
.cart__f div{padding:13px 16px 15px;border-right:1px solid rgba(255,255,255,.2);
  border-top:0;min-width:0}
.cart__f div:last-child{border-right:0}
@media (max-width:760px){
  .cart__f div:nth-child(2n){border-right:0}
  .cart__f div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2)}
}
.cart__f dt{font-variation-settings:'wdth' 78;font-weight:600;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--sur-p3);margin-bottom:4px}
.cart__f dd{margin:0;font-size:var(--t4);font-variation-settings:'wdth' 86;font-weight:500;
  color:#fff;overflow:hidden;text-overflow:ellipsis}
/* --- liens juridiques en pied de planche ---------------------------------- */
.pied__j{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.pied__j a{color:var(--sur-c);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:1px;transition:color .16s,border-color .16s}
.pied__j a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}

.pied{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:15px 0 22px;font-size:var(--t3);color:var(--sur-p3);font-variation-settings:'wdth' 86;
  border-top:1px solid rgba(255,255,255,.2)}

/* --- écriture de droite à gauche (arabe) ----------------------------------
   Le sens vient de dir="rtl" sur <html>. Presque tout suit tout seul, parce
   que la mise en page est en flex et en grid ; on ne reprend ici que ce qui
   est ancré à un bord nommé, et les tracés qui pointent vers l'avant.     */
[dir="rtl"] .langue__m{right:auto;left:0}
[dir="rtl"] .bt svg,
[dir="rtl"] .lien-f svg,
[dir="rtl"] .srv__f svg{transform:scaleX(-1)}
[dir="rtl"] .bt:hover svg{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .datum div{padding:16px 0 18px 20px;border-right:0;
  border-left:1px solid rgba(255,255,255,.18)}
[dir="rtl"] .datum div:first-child{padding-right:0}
[dir="rtl"] .datum div:last-child{border-left:0}
[dir="rtl"] .srv__c{border-right:0;border-left:1px solid var(--filet)}
[dir="rtl"] .srv__c:nth-child(3n){border-left:0}
[dir="rtl"] .srv__v{clip-path:polygon(100% 0, 0 0, 0 100%, 70% 100%, 70% 88%, 100% 88%)}
[dir="rtl"] .mr-et--m{left:auto;right:11px}
[dir="rtl"] .mr-et--r{right:auto;left:11px}
[dir="rtl"] .mr-astuce{transform:translateX(50%)}
[dir="rtl"] .datum__ch{flex-direction:row-reverse}
[dir="rtl"] .rail a{border-right:0;border-left:1px solid var(--filet)}
[dir="rtl"] .rail a:last-child{border-left:0}
/* L'arabe porte ses signes au-dessus et au-dessous de la ligne : un interligne
   serré les rogne. On ouvre les titres, et on annule les chasses négatives. */
[dir="rtl"] body{line-height:1.75}
[dir="rtl"] .clause{letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,
[dir="rtl"] .act__h,[dir="rtl"] .srv__t,[dir="rtl"] .srv-t__h,
[dir="rtl"] .datum dt{letter-spacing:0;line-height:1.45}
[dir="rtl"] .ouv__ch,[dir="rtl"] .chapeau{line-height:1.85}
[dir="rtl"] .mr-et,[dir="rtl"] .datum__ch,[dir="rtl"] .dom__t{letter-spacing:.04em}

/* --- faits d'une fiche de site --------------------------------------------
   Quand la description est rédigée en faits séparés par « | », le panneau la
   rend en liste : prestations, état du projet, phases SIA, usage.         */
.faits{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.faits li{
  display:grid;grid-template-columns:8px 1fr;gap:11px;align-items:baseline;
  font-size:var(--t5);line-height:1.5;color:var(--enc-2);
}
.faits li::before{content:'';width:6px;height:6px;background:var(--cyan);transform:translateY(-1px)}
.faits li:first-child{font-weight:600;color:var(--enc)}

/* --- pages juridiques ------------------------------------------------------
   Mentions légales et protection des données. Même registre que les pages de
   service : colonne de numéros, filets de tableau, mesure courte. Un document
   qu'on peut lire à l'écran et imprimer sans qu'il change de nature.       */
.page-sv .jur{padding-top:clamp(104px,10vw,132px)}
.jur__t{max-width:62ch;margin-top:clamp(14px,1.8vw,22px)}
.jur__h1{margin:14px 0 18px;text-transform:uppercase;letter-spacing:-.014em;
  font-variation-settings:'wdth' 86;font-weight:700;
  font-size:clamp(var(--t10),4.4vw,var(--t12));line-height:1.04}
.jur__c{margin-top:clamp(34px,4.4vw,58px);border-top:1px solid var(--filet)}
.jur__s{padding:clamp(24px,2.8vw,36px) 0;border-bottom:1px solid var(--filet)}
.jur__h{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2.2vw,28px);align-items:baseline;margin:0 0 14px;
  font-size:var(--t8);line-height:1.2;text-transform:uppercase;
  letter-spacing:-.006em;font-variation-settings:'wdth' 88}
.jur__n{font-variation-settings:'wdth' 78;font-weight:700;font-size:var(--t6);
  color:var(--cob);min-width:2.6ch}
.jur__p{margin:0 0 12px;font-size:var(--t6);line-height:1.66;color:var(--enc-2);max-width:74ch}
.jur__p:last-child{margin-bottom:0}
.jur__p b{color:var(--enc);font-weight:600}
.jur__p a,.jur__d a{color:var(--cob)}
.jur__u{margin-top:14px;max-width:74ch}
/* une liste de définitions en filets : le registre du cartouche, en clair */
.jur__d{margin:14px 0 0;display:grid;gap:0;max-width:82ch;border-top:1px solid var(--filet)}
.jur__d>div{display:grid;grid-template-columns:minmax(9rem,15rem) minmax(0,1fr);
  gap:6px clamp(14px,2vw,28px);padding:10px 0;border-bottom:1px solid var(--filet)}
.jur__d dt{font-variation-settings:'wdth' 84;font-weight:600;font-size:var(--t4);
  letter-spacing:.03em;text-transform:uppercase;color:var(--enc-3);line-height:1.45}
.jur__d dd{margin:0;font-size:var(--t5);line-height:1.6;color:var(--enc-2)}
@media (max-width:640px){.jur__d>div{grid-template-columns:1fr;padding:12px 0}}
/* une fiche de traitement : le bloc se détache sur la plaque blanche */
.jur__f{margin:20px 0 0;background:var(--pap-b);border:1px solid var(--filet);
  padding:clamp(16px,2vw,24px);max-width:88ch}
.jur__f+.jur__f{margin-top:14px}
.jur__ft{margin:0;font-size:var(--t6);font-weight:600;font-variation-settings:'wdth' 88;
  text-transform:uppercase;letter-spacing:.01em;color:var(--enc)}
.jur__f .jur__d{margin-top:10px;border-top:0;max-width:none}
.jur__f .jur__d>div:last-child{border-bottom:0;padding-bottom:0}
.jur__maj{margin:clamp(22px,2.6vw,30px) 0 0;font-size:var(--t4);color:var(--enc-3);
  font-variation-settings:'wdth' 86}
.jur__maj b{color:var(--enc-2);font-weight:600}
.jur__l{display:flex;gap:clamp(18px,3vw,38px);flex-wrap:wrap;margin:22px 0 0}

/* --- accessibilité -------------------------------------------------------- */
:focus-visible{outline:2.5px solid var(--cob);outline-offset:2px}
.champ :focus-visible,.cartouche :focus-visible{outline-color:var(--cyan)}
/* Le lien d'évitement se range hors écran par le côté logique : en arabe,
   « left » le ramenait dans la page.                                       */
.saut{position:absolute;inset-inline-start:-9999px;top:0;background:var(--enc);color:#fff;
  padding:12px 20px;z-index:100}
.saut:focus{inset-inline-start:var(--marge);top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- l'unique moment animé : l'entrée en scène ---------------------------- */
@media (prefers-reduced-motion:no-preference){
  [data-monte]{opacity:0;transform:translateY(16px)}
  [data-monte].vu{opacity:1;transform:none;
    transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);
    /* le retard vient du script : les éléments d'une même série se posent
       l'un après l'autre plutôt que tous ensemble.                        */
    transition-delay:var(--d,0ms)}
}

/* --- le rappel de contact, qui suit la lecture ---------------------------- */
/* Fixé au coin bas, du côté logique : en arabe il passe à gauche de lui-même.
   Il n'apparaît qu'une fois l'ouverture passée — c'est le script qui pose
   `--vu` — et s'efface devant la section de contact. Sous 420 px, le bouton
   d'en-tête disparaît et celui-ci prend le relais.                         */
.cta-f{
  position:fixed;z-index:30;
  inset-block-end:clamp(15px,2.4vw,26px);
  inset-inline-end:clamp(15px,2.4vw,26px);
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 19px;
  background:var(--enc);color:#fff;text-decoration:none;
  font:inherit;font-size:var(--t3);font-weight:600;
  font-variation-settings:'wdth' 86;letter-spacing:.01em;
  box-shadow:0 6px 22px rgba(0,32,64,.24);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease,background-color .16s;
}
.cta-f--vu{opacity:1;transform:none;pointer-events:auto}
.cta-f:hover{background:var(--cob)}
.cta-f:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.cta-f svg{flex:0 0 auto}
@media (max-width:420px){.cta-f{padding:12px 16px;font-size:var(--t2)}}
@media (prefers-reduced-motion:reduce){.cta-f{transition:opacity .01s}}

@media print{
  .tete,.rail,.feuille,.mr,.burger,.tiroir,.cta-f{display:none!important}
  .jur__f{border-color:#999}
  .jur__s{break-inside:avoid}
  body{background:#fff;font-size:11pt}
  .champ,.cartouche{background:#fff!important;color:#000!important}
  .champ *,.cartouche *{color:#000!important}
  .sect{padding-block:18pt;break-inside:avoid}
}