/* ═══════════════════════════════════════════════════════════════
   NOUVELLE ÉPOQUE — La plateforme des territoires
   Reprise de la maquette « La République connectée à ses communes »
   (référence 846 px de large ; reconstruite sur une base de 1440 px).
   Les respirations verticales sont volontairement plus larges que sur
   la maquette : les sections doivent respirer sans casser le rythme.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Papier et encres, relevés sur la maquette */
  --papier:#fbf5ed;
  --papier-creux:#f7f0e4;          /* bandes alternées, très légèrement plus chaudes */
  --carte:#fcf8f1;
  --carte-creuse:#faf5ec;

  --navy:#0d2b45;                  /* jeton de marque */
  --navy-titre:#0f2e52;            /* le bleu des titres sur la maquette */
  --navy-clair:#1d4772;
  --rouge:#b4232a;
  --or:#b9914a;
  --or-texte:#8b6c33;              /* même or, assez dense pour porter du texte (4.5:1 sur le papier) */

  --texte:#4b5563;
  --texte-doux:#5e6672;
  --bord:#e7dcc9;
  --bord-clair:#ece2d0;

  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Lato','Segoe UI',system-ui,-apple-system,sans-serif;

  --conteneur:1440px;
  --marge:clamp(22px,6.8vw,98px);
  --respire:clamp(58px,6.4vw,98px);    /* padding vertical des sections */
  --rayon:10px;
  --rayon-large:14px;

  --ombre-carte:0 1px 2px rgba(13,43,69,.04), 0 10px 24px -20px rgba(13,43,69,.20);
  --ombre-levee:0 2px 6px rgba(13,43,69,.07), 0 22px 44px -24px rgba(13,43,69,.30);
  --ombre-ecran:0 3px 10px rgba(13,43,69,.08), 0 40px 70px -34px rgba(13,43,69,.42);

  --sortie:cubic-bezier(.16,.84,.44,1);
  --entete-h:128px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--entete-h) + 18px);
  -webkit-text-size-adjust:100%;
}

body{
  background:#fdf8f1 url('assets/papier.jpg');
  background-size:520px;
  color:var(--texte);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
li{list-style:none}
button,input{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--navy-clair);outline-offset:3px;border-radius:3px}

.pochoir{position:absolute;width:0;height:0;overflow:hidden}
.pochoir symbol{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pochoir .plein{fill:currentColor;stroke:none}

.lecteur-seul{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

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

/* ─────────────── Typographie commune ─────────────── */

.surtitre{
  font-family:var(--serif);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--or-texte);
  text-align:center;
}

.titre-section{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(27px,3vw,38px);
  line-height:1.22;
  letter-spacing:-.005em;
  color:var(--navy-titre);
  text-align:center;
  position:relative;
}
.titre-gauche{text-align:left}

.point{color:var(--rouge)}

.chapeau{
  font-size:16.5px;
  line-height:1.78;
  color:var(--texte);
  max-width:46ch;
}

/* le petit filet tricolore glissé sous le dernier mot du titre */
.tricolore{
  position:absolute;left:50%;bottom:-.34em;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  display:flex;width:56px;height:2.5px;border-radius:2px;overflow:hidden;
  transition:transform .8s var(--sortie) .25s;
}
.titre-section.vu .tricolore{transform:translateX(-50%) scaleX(1)}
.tricolore i{flex:1}
.t-bleu{background:var(--navy)} .t-blanc{background:#e9e0cf} .t-rouge{background:var(--rouge)}

/* ─────────────── Fleuron ─────────────── */

.fleuron{
  display:block;width:168px;height:14px;
  color:var(--or);
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  margin-inline:auto;
}
.fleuron .pastille,.fleuron .aile-g,.fleuron .aile-d{fill:currentColor;stroke:none}
.fleuron-gauche{margin-inline:0}
.fleuron-court{width:120px}

/* le trait se déploie depuis le cœur quand l'ornement entre à l'écran */
.fleuron .trait-g,.fleuron .trait-d{transform-origin:right center;transform:scaleX(0);transition:transform .85s var(--sortie)}
.fleuron .trait-d{transform-origin:left center}
.fleuron .coeur,.fleuron .pastille,.fleuron .aile-g,.fleuron .aile-d{opacity:0;transition:opacity .5s ease .35s}
.fleuron.vu .trait-g,.fleuron.vu .trait-d{transform:scaleX(1)}
.fleuron.vu .coeur,.fleuron.vu .pastille,.fleuron.vu .aile-g,.fleuron.vu .aile-d{opacity:1}

/* ─────────────── Boutons ─────────────── */

.bouton{
  --fond:transparent;--encre:var(--navy);--trait:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:11px 22px;
  border:1px solid var(--trait);
  border-radius:12px;
  background:var(--fond);
  color:var(--encre);
  font-size:14.5px;font-weight:700;letter-spacing:.012em;
  cursor:pointer;
  transition:transform .28s var(--sortie),box-shadow .28s var(--sortie),
             background-color .28s ease,border-color .28s ease,color .28s ease;
}
.bouton-large{padding:12.5px 22px;font-size:14px}

.bouton-plein{--fond:var(--navy);--encre:#fbf5ed;--trait:var(--navy);box-shadow:0 1px 2px rgba(13,43,69,.18)}
.bouton-plein:hover{--fond:#12395c;transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(13,43,69,.55)}

.bouton-ligne{--trait:var(--bord);--encre:var(--navy);--fond:transparent}
.bouton-ligne:hover{--trait:var(--or);--fond:#fdfaf4;transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(13,43,69,.35)}

.bouton-ivoire{--fond:#f6efe1;--encre:var(--navy);--trait:#f6efe1}
.bouton-ivoire:hover{--fond:#fffaf0;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}

.bouton-ligne-claire{--trait:rgba(246,239,225,.55);--encre:#f6efe1}
.bouton-ligne-claire:hover{--trait:#f6efe1;--fond:rgba(246,239,225,.10);transform:translateY(-2px)}

/* « parler à Alison » : bouton conversation dans la charte, pastille WhatsApp */
.bouton-whatsapp{
  --fond:var(--navy);--encre:#fbf5ed;--trait:var(--navy);
  --anneau:rgba(253,250,244,.95);
  position:relative;overflow:visible;
  border-radius:999px;
  padding:6px 22px 6px 6px;
  gap:11px;
  box-shadow:0 1px 2px rgba(13,43,69,.18);
}
.bouton-whatsapp:hover{--fond:#12395c;--trait:#12395c;transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(13,43,69,.55)}
.bouton-whatsapp.bouton-large{padding:7px 26px 7px 7px}
/* sur le fond navy de l'appel, la pilule passe en ivoire : l'anneau du portrait passe en navy */
.appel .bouton-whatsapp{--fond:#f6efe1;--encre:var(--navy);--trait:#f6efe1;--anneau:rgba(13,43,69,.14)}
.appel .bouton-whatsapp:hover{--fond:#fffaf0;--trait:#fffaf0;box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}
.wa-avatar{position:relative;width:32px;height:32px;flex:0 0 auto}
.bouton-large .wa-avatar{width:38px;height:38px}
/* le portrait d'Alison du kit de marque, sur son disque vert, cerclé de la couleur de la pilule */
.wa-avatar .wa-visage{
  display:block;width:100%;height:100%;border-radius:50%;
  background:#12784a;
  box-shadow:0 0 0 2px var(--anneau),0 1px 3px rgba(13,43,69,.35);
  transition:box-shadow .28s ease;
}
.wa-avatar .wa-badge{
  position:absolute;right:-5px;bottom:-3px;z-index:2;
  width:15px;height:15px;padding:3px;
  color:#fff;background:#25d366;border-radius:50%;
  box-shadow:0 0 0 2px var(--fond);
  transition:box-shadow .28s ease;
}
.bouton-large .wa-avatar .wa-badge{width:17px;height:17px;padding:3.4px;right:-5px;bottom:-3px}

/* le bouton du header vit : la pastille émet un ping, un reflet balaye la pilule */
.entete-actions .bouton-whatsapp .wa-avatar::after{
  content:"";position:absolute;right:-5px;bottom:-3px;z-index:1;
  width:15px;height:15px;border-radius:50%;
  animation:wa-ping 2.6s ease-out infinite;
}
@keyframes wa-ping{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  70%,100%{box-shadow:0 0 0 8px rgba(37,211,102,0)}
}
.entete-actions .bouton-whatsapp{overflow:hidden}
.entete-actions .bouton-whatsapp .wa-avatar,.entete-actions .bouton-whatsapp .wa-badge{z-index:2}
.entete-actions .bouton-whatsapp::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(105deg,transparent 0,rgba(251,245,237,.30) 50%,transparent 100%);
  transform:translateX(-140%) skewX(-18deg);
  animation:wa-brille 4.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes wa-brille{
  0%,58%{transform:translateX(-140%) skewX(-18deg)}
  82%,100%{transform:translateX(330%) skewX(-18deg)}
}

/* un libellé de maquette sans destination : il se voit, il ne se clique pas */
.bouton-inactif,.lien-inactif{cursor:default}

.lien-fleche{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:700;color:var(--navy);
}
.lien-fleche .fleche{
  color:var(--navy-clair);
  transition:transform .3s var(--sortie);
}
.lien-fleche:hover .fleche{transform:translateX(6px)}

/* ─────────────── La plume ───────────────
   Le pointeur écrit : la trace vit au-dessus de la page, sans jamais
   intercepter un clic ni gêner un lecteur d'écran. */

.plume{
  position:fixed;inset:0;z-index:64;
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* ─────────────── Fil de lecture ───────────────
   La page fait dix mille pixels : un trait dit où l'on en est. */

.fil-lecture{
  position:fixed;top:0;left:0;right:0;z-index:70;
  height:2px;pointer-events:none;
}
.fil-lecture i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--or),#d3ab63);
  transition:width .12s linear;
}

/* ─────────────── Numéro de chapitre ───────────────
   Le document se parcourt comme un dossier, chapitre par chapitre. */

.chapitre{
  font-style:normal;
  display:inline-block;
  margin-right:13px;padding-right:13px;
  border-right:1px solid var(--bord);
  color:var(--or);
  letter-spacing:.1em;
}

/* ─────────────── Respirations ───────────────
   Entre deux mouvements du dossier, le papier reprend la parole. */

.respiration{
  padding-block:clamp(30px,3.6vw,56px);
  display:grid;place-items:center;
  border-bottom:1px solid var(--bord-clair);
}
.respiration .fleuron{width:196px;opacity:.85}
.respiration .fleuron .trait-g,.respiration .fleuron .trait-d{transform:scaleX(1)}
.respiration .fleuron .coeur,.respiration .fleuron .pastille,
.respiration .fleuron .aile-g,.respiration .fleuron .aile-d{opacity:1}

/* ─────────────── En-tête ─────────────── */

.entete{
  position:sticky;top:0;z-index:60;
  background:transparent;
  transition:background-color .4s ease,box-shadow .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.entete.posee{
  background:rgba(251,245,237,.88);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom-color:var(--bord-clair);
  box-shadow:0 8px 26px -22px rgba(13,43,69,.5);
}

.entete-corps{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
  min-height:var(--entete-h);
  max-width:1440px;
  padding-inline:clamp(18px,3.7vw,53px);
  transition:min-height .42s var(--sortie);
}
.entete.posee .entete-corps{min-height:80px}

.marque{flex:0 0 auto;display:block}
.marque img{width:clamp(200px,23vw,332px);height:auto;transition:width .42s var(--sortie)}
.entete.posee .marque img{width:clamp(170px,15.4vw,222px)}

.nav{
  position:relative;
  display:flex;align-items:center;gap:clamp(16px,2.5vw,38px);
  margin-inline:auto;
}
.nav a{
  position:relative;
  padding:7px 2px;
  font-size:15px;font-weight:400;color:#3f4c5c;
  white-space:nowrap;
  transition:color .25s ease;
}
.nav a:hover,.nav a.actif{color:var(--navy)}

/* la glissière suit l'onglet survolé, puis revient sur la section lue */
.nav-glissiere{
  position:absolute;bottom:0;left:0;height:1px;width:0;
  background:var(--or);border-radius:2px;
  opacity:0;
  /* discret : le trait guide sans attirer l'oeil */
  transition:transform .42s var(--sortie),width .42s var(--sortie),opacity .3s ease;
  pointer-events:none;
}

.entete-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}

.entete-menu{
  display:none;
  width:42px;height:42px;
  border:1px solid var(--bord);border-radius:6px;
  background:rgba(253,250,244,.7);
}
.entete-menu-barres{display:flex;flex-direction:column;gap:4px;align-items:center}
.entete-menu-barres i{display:block;width:17px;height:1.7px;background:var(--navy);border-radius:2px;transition:transform .3s var(--sortie),opacity .2s ease}
.entete-menu[aria-expanded="true"] i:nth-child(1){transform:translateY(5.7px) rotate(45deg)}
.entete-menu[aria-expanded="true"] i:nth-child(2){opacity:0}
.entete-menu[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.7px) rotate(-45deg)}

.menu-mobile{
  display:none;flex-direction:column;gap:4px;
  padding:10px var(--marge) 22px;
  background:rgba(251,245,237,.97);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--bord-clair);
}
.menu-mobile a{padding:12px 2px;font-size:16px;color:var(--navy);border-bottom:1px solid var(--bord-clair)}
/* le bouton du menu garde l'encre et le calage de sa pilule, sinon son libellé disparaît sur le navy */
.menu-mobile a.bouton{color:var(--encre);padding:7px 22px 7px 7px}
.menu-mobile a:last-child{border:0;margin-top:12px;justify-content:center}

/* ─────────────── Hero ─────────────── */

.hero{
  position:relative;
  contain:layout paint style;
  overflow:hidden;
  padding-block:clamp(40px,4.6vw,66px) clamp(30px,3.4vw,48px);
  border-bottom:1px solid var(--bord-clair);
}

/* le montage (mairie + les deux vues) s'affiche entier, jamais recadré */
.hero-visuel{
  position:relative;
  width:min(1400px,100%);
  margin:clamp(20px,2.4vw,36px) auto 0;
  pointer-events:none;
}
.hero-mairie{
  display:block;
  width:100%;height:auto;
  mix-blend-mode:multiply;
  /* les bords s'enfument dans le papier, aucun bord franc */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 4.5%,#000 94.5%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 4.5%,#000 94.5%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:0;transform:scale(1.02);
  transition:opacity 1.6s ease,transform 2.4s var(--sortie);
}

.hero-corps{position:relative;z-index:2;width:100%}
.hero-texte{margin-inline:auto;text-align:center}

.hero-titre{
  font-family:var(--serif);
  font-weight:600;
  /* une seule ligne, à l'échelle de l'aquarelle pleine largeur */
  font-size:clamp(38px,4.9vw,70px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--navy-titre);
}
.hero-titre .ligne{display:block;overflow:hidden;padding-block:.04em}
.hero-titre .mot{
  display:block;
  transform:translateY(105%);
  transition:transform 1s var(--sortie);
}

.hero .fleuron-gauche{display:block;width:min(302px,86%);height:auto;margin:clamp(13px,1.5vw,19px) auto 0;opacity:0;transition:opacity .6s ease}
.hero-chapeau{
  margin:clamp(14px,1.7vw,21px) auto 0;
  max-width:64ch;
  font-size:16.5px;line-height:1.72;color:#414d5c;
}
.hero-bas{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  margin-top:clamp(18px,2.2vw,30px);
}
/* la rangée de réassurance, nue sur le papier */
.reassurances{
  display:flex;align-items:flex-start;
  width:min(680px,100%);
}
.reassurances li{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding-inline:clamp(6px,1.1vw,16px);
  text-align:center;
  font-size:12.5px;line-height:1.45;color:#4c5866;
  border-left:1px solid #e2d7c3;
}
.reassurances li:first-child{border-left:0}
.reassurances .ic{width:26px;height:26px;color:var(--or)}
.reassurances .drapeau{margin-bottom:1px}


.drapeau{display:inline-flex;height:17px;width:26px;border-radius:1.5px;overflow:hidden}
.drapeau i{flex:1}
.d-bleu{background:var(--navy)} .d-blanc{background:#f3ebdb} .d-rouge{background:var(--rouge)}
.drapeau-pied{height:9px;width:44px;border-radius:1px}
.drapeau-pied i{flex:none;width:20px}
.drapeau-pied .d-blanc{width:4px;background:transparent}

/* déclenchement de la scène d'ouverture */
.hero.jouee .hero-titre .mot{transform:translateY(0)}
.hero.jouee .hero-titre .ligne:nth-child(2) .mot{transition-delay:.1s}
.hero.jouee .hero-titre .ligne:nth-child(3) .mot{transition-delay:.2s}
.hero.jouee .fleuron-gauche{opacity:1;transition-delay:.42s}
.hero.jouee .hero-mairie{opacity:1;transform:scale(1)}

/* ─────────────── Sections ─────────────── */

.section{
  position:relative;
  contain:layout paint style;
  padding-block:var(--respire);
  --respire-locale:var(--respire);
  border-bottom:1px solid var(--bord-clair);
}
/* le rythme des fonds est posé plus bas, section par section */
/* les moments de lecture respirent plus large que les moments de démonstration */
.origine,.filiation,.manifeste{padding-block:calc(var(--respire) * 1.28)}
.services,.garde,.deploiement{padding-block:calc(var(--respire) * .88)}

.section .surtitre + .fleuron-centre{margin-top:11px}
.section .fleuron-centre + .titre-section{margin-top:12px}
.section .surtitre + .titre-section{margin-top:15px}
.fleuron-centre{width:132px}

/* ─────────────── Cartes ─────────────── */

.carte{
  position:relative;
  background:var(--carte);
  border:1px solid var(--bord-clair);
  border-radius:var(--rayon);
  box-shadow:var(--ombre-carte);
  transition:transform .34s var(--sortie),box-shadow .34s var(--sortie),border-color .34s ease;
}
a.carte:hover,.carte:hover{transform:translateY(-4px);box-shadow:var(--ombre-levee);border-color:var(--or)}

.ic{width:30px;height:30px;color:var(--navy);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-grande{width:33px;height:33px}

/* ─────────────── La planche de services ───────────────
   Pas des cartes qui flottent : une planche de registre. Les feuillets sont
   séparés par des filets, pas cernés par des bordures. Deux d'entre eux
   portent la promesse et prennent deux colonnes. */

.planche{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(34px,3.8vw,56px);
  border-top:1px solid var(--bord-clair);
  border-left:1px solid var(--bord-clair);
}
.feuillet{
  position:relative;
  padding:clamp(24px,2.3vw,34px) clamp(18px,1.7vw,26px) clamp(26px,2.6vw,38px);
  border-right:1px solid var(--bord-clair);
  border-bottom:1px solid var(--bord-clair);
  transition:background-color .42s var(--sortie);
}
.feuillet:nth-child(1),.feuillet:nth-child(5){grid-column:span 2}
.feuillet::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--or);opacity:.55;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--sortie);
}
.feuillet:hover{background:rgba(253,250,244,.72)}
.feuillet:hover::after{transform:scaleX(1)}

.feuillet-rang{
  position:absolute;top:clamp(16px,1.5vw,22px);right:clamp(16px,1.5vw,22px);
  font-family:var(--serif);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;color:var(--or);opacity:.55;
  transition:opacity .4s ease;
}
.feuillet:hover .feuillet-rang{opacity:1}

.feuillet .ic{
  margin-bottom:clamp(26px,2.6vw,40px);
  transition:transform .42s var(--sortie),color .42s ease;
}
.feuillet:hover .ic{transform:translateY(-3px);color:var(--navy-clair)}
.feuillet h3{
  font-family:var(--serif);font-size:clamp(16px,1.4vw,18.5px);font-weight:600;
  line-height:1.3;color:var(--navy-titre);margin-bottom:10px;
}
.feuillet p{font-size:13.5px;line-height:1.62;color:var(--texte-doux);max-width:50ch}

/* ─────────────── Produit ─────────────── */

/* Le visuel quitte la colonne et vient chercher le bord : la page cesse
   d'être une succession de blocs sagement rangés dans une gouttière. */
.produit > .conteneur{padding-left:0}
.produit-grille{
  display:grid;
  grid-template-columns:minmax(0,1.86fr) minmax(0,1fr);
  gap:clamp(30px,3.4vw,58px);
  align-items:center;
}
@media (min-width:1001px){
  .produit-ecrans{padding-left:clamp(14px,2vw,30px)}
}

.produit-ecrans{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(10px,1.4vw,22px);
  padding-block:clamp(8px,1.4vw,20px);
}

/* ═══ Les deux écrans produit sont composés en HTML, pas capturés ═══
   Chaque écran est une boîte à requête de conteneur : toutes ses mesures sont
   en cqw, donc 1 unité = 1 % de sa propre largeur. Le rendu reste strictement
   identique à lui-même à n'importe quelle taille, comme le ferait une image,
   mais le texte reste du texte. Repère : 1 px de la maquette d'origine vaut
   0.0559 cqw sur le tableau de bord, 0.0959 cqw sur le mobile. */

.ecran{
  container-type:inline-size;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* ─── Tableau de bord ─── */

.ecran-bureau{width:100%;aspect-ratio:1788/1284}
/* le plan intérieur porte la mise en page : un conteneur de requête ne peut pas
   se mesurer lui-même, ses propres cqw retomberaient sur la fenêtre */
.ec-plan{
  height:100%;
  display:grid;grid-template-columns:28.7cqw minmax(0,1fr);
  background:#f4ede2;
  border-radius:1.35cqw;
  overflow:hidden;
  box-shadow:var(--ombre-ecran);
}

.ec-flanc{
  background:linear-gradient(170deg,#16344f,#082742);
  padding:3.1cqw 1.75cqw;
  display:flex;flex-direction:column;
}
.ec-marque{width:19.4cqw;height:auto;margin:.1cqw 0 3.97cqw 1.1cqw}

.ec-menu{display:flex;flex-direction:column;gap:1.35cqw}
.ec-item{
  display:flex;align-items:center;gap:1.45cqw;
  padding:1.05cqw 1.4cqw;
  border-radius:.62cqw;
  color:rgba(223,232,240,.86);
  font-size:1.78cqw;
  white-space:nowrap;
}
.ec-item svg{
  flex:0 0 auto;width:2.3cqw;height:2.3cqw;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.ec-item-actif{
  background:rgba(255,255,255,.115);
  color:#f2f7fb;
  box-shadow:inset 0 0 0 .055cqw rgba(255,255,255,.07);
}

.ec-corps{display:flex;flex-direction:column;min-width:0}
.ec-barre{
  flex:0 0 auto;height:7.17cqw;
  display:flex;align-items:center;justify-content:flex-end;gap:2.5cqw;
  padding-inline:3.4cqw;
  border-bottom:.1cqw solid #e2d7c3;
}
.ec-commune{display:inline-flex;align-items:center;gap:.85cqw;font-size:1.52cqw;color:#3f4a59}
.ec-chevron{
  width:.52em;height:.52em;
  border-right:.09em solid currentColor;border-bottom:.09em solid currentColor;
  transform:translateY(-.14em) rotate(45deg);
}
.ec-cloche{position:relative;display:block}
.ec-cloche svg{
  display:block;width:2.15cqw;height:2.15cqw;
  fill:none;stroke:#22303f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.ec-pastille{
  position:absolute;top:-.15cqw;right:-.28cqw;
  width:1.02cqw;height:1.02cqw;border-radius:50%;
  background:var(--rouge);
  box-shadow:0 0 0 .17cqw #f4ede2;
  transform:scale(0);
}
.ecran-bureau.vu .ec-pastille{animation:pastille-arrive .5s var(--sortie) 1.1s forwards}
@keyframes pastille-arrive{
  0%{transform:scale(0)}
  62%{transform:scale(1.28)}
  100%{transform:scale(1)}
}

.ec-page{flex:1;min-height:0;display:flex;flex-direction:column;padding:3.41cqw 3.4cqw 2.81cqw}
.ec-titre{
  font-family:var(--serif);font-weight:500;
  font-size:3.28cqw;line-height:1.1;color:#12304f;
  margin-bottom:3.82cqw;
}

.ec-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.96cqw}
.ec-tuile{
  background:#f7f1e5;
  border:.06cqw solid #e7ddca;
  border-radius:.68cqw;
  padding:2.65cqw 1.85cqw 2.56cqw;
}
.ec-tuile-nom{font-size:1.55cqw;color:#3d4756}
.ec-chiffre{
  margin-top:.85cqw;
  font-size:4.15cqw;font-weight:700;line-height:1.02;
  letter-spacing:-.015em;color:#0f2e52;
  font-variant-numeric:tabular-nums;
}
.ec-note{margin-top:1.05cqw;font-size:1.42cqw;color:#6d7683}
.ec-hausse{color:#3d7a4b}

.ec-bas{
  flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.96cqw;
  margin-top:2.92cqw;
}
.ec-carte{
  position:relative;overflow:hidden;
  background:#f7f1e5;
  border:.06cqw solid #e7ddca;
  border-radius:.68cqw;
  padding:1.85cqw;
}
.ec-carte-nom{font-size:1.72cqw;font-weight:700;color:#12304f;margin-bottom:1.9cqw}

.ec-ligne{display:flex;align-items:flex-start;gap:1.25cqw;margin-bottom:1.6cqw}
.ec-ligne:last-child{margin-bottom:0}
.ec-vignette svg{
  display:block;width:2.1cqw;height:2.1cqw;margin-top:.2cqw;
  fill:none;stroke:#2b3a4c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.ec-ligne b{display:block;font-size:1.55cqw;font-weight:400;color:#22303f}
.ec-ligne i{display:block;font-style:normal;font-size:1.3cqw;color:#7b8290;margin-top:.35cqw}

.ec-sondage-titre{
  font-size:2.08cqw;font-weight:700;line-height:1.34;color:#12304f;
  margin-bottom:1.7cqw;
}
.ec-bouton{
  position:relative;z-index:2;
  display:inline-block;
  padding:.88cqw 1.55cqw;
  border:.06cqw solid #dacfba;border-radius:.5cqw;
  background:#faf5ec;
  font-size:1.42cqw;color:#22303f;
}
.ec-gravure{
  position:absolute;right:-7%;bottom:-4.5%;
  width:132%;height:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 100%),
                     linear-gradient(to bottom,transparent 0,#000 16%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 100%),
                     linear-gradient(to bottom,transparent 0,#000 16%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* ─── Écran mobile ─── */

.ecran-mobile{width:clamp(120px,14.2vw,205px);aspect-ratio:1043/1790}
.mo-corps{
  display:flex;flex-direction:column;height:100%;
  padding:5.6cqw 6.8cqw 0;
  background:#f4ede2;
  border:.68cqw solid #ded3c0;
  border-radius:6.5cqw;
  overflow:hidden;
  box-shadow:0 1.4cqw 3.4cqw rgba(13,43,69,.26), 0 .3cqw .8cqw rgba(13,43,69,.10);
}

.mo-barre{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.mo-marque{width:44cqw;height:auto}
.mo-burger{display:flex;flex-direction:column;gap:1.35cqw}
.mo-burger i{display:block;width:6.8cqw;height:.8cqw;border-radius:.5cqw;background:#22303f}

.mo-bonjour{margin-top:6.8cqw;font-size:3.35cqw;color:#3d4756}
.mo-commune{
  display:flex;align-items:center;gap:1.5cqw;
  margin-top:.7cqw;
  font-size:5.7cqw;font-weight:700;color:#12304f;letter-spacing:-.01em;
}
.mo-section{font-size:3.9cqw;font-weight:700;color:#12304f}
.mo-corps > .mo-section{margin-top:7.2cqw}

.mo-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5cqw;margin-top:2.6cqw}
.mo-tuile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqw;
  aspect-ratio:1/.96;
  background:#f7f1e5;
  border:.28cqw solid #e7ddca;
  border-radius:2.5cqw;
  font-size:2.68cqw;color:#3d4756;text-align:center;line-height:1.2;
  padding-inline:.8cqw;
}
.mo-tuile svg{
  width:8.6cqw;height:8.6cqw;
  fill:none;stroke:#22303f;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}

.mo-entete-actu{display:flex;align-items:baseline;justify-content:space-between;margin-top:7.4cqw}
.mo-voir{font-size:2.75cqw;font-weight:700;color:#1d4772}

.mo-actu{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  margin-top:2.6cqw;
  min-height:24.5cqw;
  padding:3.4cqw;
  background:#f7f1e5;
  border:.28cqw solid #e7ddca;
  border-radius:2.5cqw;
}
.mo-actu-texte{position:relative;z-index:2;max-width:62%}
.mo-actu b{display:block;font-size:2.75cqw;font-weight:400;color:#22303f;line-height:1.34}
.mo-actu i{display:block;font-style:normal;font-size:2.75cqw;color:#22303f;margin-top:1cqw}
.mo-gravure{
  position:absolute;right:-1cqw;bottom:-.5cqw;
  width:60%;height:auto;opacity:.92;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 26%,#000 100%);
}

.produit-texte .surtitre{text-align:left}
.produit-texte .chapeau{margin-top:18px;font-size:15px;line-height:1.72}
.produit-texte .titre-section{margin-top:16px}

.liste-cochee{margin-top:clamp(24px,2.6vw,32px);display:grid;gap:13px}
.liste-cochee li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:14px;color:#404b58;
}
.coche{
  flex:0 0 auto;width:17px;height:17px;margin-top:3px;
  color:var(--or);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.produit-texte .bouton{margin-top:clamp(28px,3vw,38px)}

/* ─────────────── Confiance ───────────────
   Les cinq blasons tiennent une ligne entière, séparés par des filets, comme
   une frise de sceaux. La parole du maire vient dessous, et prend la place
   qu'une citation mérite. */

.rangee-blasons{
  margin-top:clamp(28px,3.2vw,44px);
  padding-block:clamp(24px,2.8vw,40px);
  border-top:1px solid var(--bord-clair);
  border-bottom:1px solid var(--bord-clair);
}
.blasons{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
}
.blasons li{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding-inline:clamp(8px,1.4vw,22px);
  text-align:center;
  font-size:12px;line-height:1.32;color:var(--navy-titre);
  border-left:1px solid var(--bord-clair);
}
.blasons li:first-child{border-left:0}
.blason{
  width:clamp(58px,5.4vw,76px);height:auto;
  color:var(--navy);
  fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
  opacity:.82;
  transition:transform .42s var(--sortie),opacity .42s ease;
}
.blason .cercle-ext{stroke-width:2.4}
.blason .cercle-int{stroke-width:1}
.blason .ecu{stroke-width:2.8}
.blason .couronne{stroke-width:2.6}
.blason .motif{stroke-width:2.2}
.blason .volute{stroke-width:1.5}
.blason .branche{stroke-width:1.7}
.blason .feuille{stroke-width:1.3}
.blason .motif.plein{fill:currentColor;stroke:none}
.blasons li:hover .blason{transform:translateY(-4px);opacity:1}

.citation{
  max-width:74ch;margin:clamp(30px,3.6vw,52px) auto 0;
  text-align:center;
}
.citation .guillemet{
  font-family:var(--serif);font-style:normal;font-weight:700;
  font-size:1.55em;line-height:0;
  color:var(--or);opacity:.8;
}
.guillemet-ouvre{vertical-align:-.28em;margin-right:.08em}
.guillemet-ferme{vertical-align:-.28em;margin-left:.04em}
.citation blockquote{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(18px,2vw,26px);line-height:1.5;
  color:#2f3b4b;letter-spacing:-.005em;
}
.citation figcaption{
  margin-top:clamp(14px,1.6vw,20px);
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  font-family:var(--serif);color:var(--or-texte);
}

/* ─────────────── Les trois volets ───────────────
   Le chiffre romain porte la valeur : c'est lui qui structure, pas une boîte. */

.volets{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(34px,3.8vw,54px);
}
.volets li{
  position:relative;
  padding:clamp(10px,1.4vw,20px) clamp(22px,2.6vw,44px) clamp(10px,1.4vw,18px);
  border-left:1px solid var(--bord-clair);
}
.volets li:first-child{border-left:0;padding-left:0}
.volet-rang{
  display:block;
  font-family:var(--serif);font-size:clamp(34px,3.8vw,54px);font-weight:600;
  line-height:1;color:var(--or);opacity:.24;
  margin-bottom:clamp(-12px,-1vw,-8px);
  transition:opacity .5s var(--sortie),transform .5s var(--sortie);
}
.volets li:hover .volet-rang{opacity:.4;transform:translateY(-2px)}
.volets .ic-valeur{
  width:38px;height:38px;stroke-width:1.5;
  margin-bottom:clamp(14px,1.6vw,22px);
  position:relative;z-index:2;
}
.volets h3{
  font-family:var(--serif);font-size:clamp(17px,1.55vw,20px);font-weight:600;
  color:var(--navy-titre);margin-bottom:10px;line-height:1.28;
}
.volets p{font-size:14px;line-height:1.66;color:var(--texte-doux);max-width:34ch}

/* ─────────────── Colonne d'aparté + grille (outils, pour qui, ressources) ─────────────── */

.duo{
  display:grid;
  grid-template-columns:minmax(272px,1fr) minmax(0,2.05fr);
  gap:clamp(30px,3.6vw,64px);
  align-items:center;
}
.duo-tiers{grid-template-columns:minmax(268px,1fr) minmax(0,2.5fr)}
.duo-aparte .surtitre{text-align:left}
.duo-aparte .titre-section{margin-top:13px;font-size:clamp(25px,2.5vw,32px)}
.duo-aparte .fleuron{margin-top:22px}
.duo-aparte .lien-fleche{margin-top:clamp(22px,2.6vw,34px)}

/* Un index, pas quatre cartes : chaque outil est une entrée de sommaire. */
.index-outils{border-top:1px solid var(--bord-clair)}
.index-outils li{
  position:relative;
  display:grid;grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:clamp(16px,2vw,30px);
  padding:clamp(16px,1.8vw,26px) 0;
  border-bottom:1px solid var(--bord-clair);
  transition:padding-left .42s var(--sortie);
}
.index-outils li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--or);
  transform:scaleY(0);transform-origin:top center;
  transition:transform .42s var(--sortie);
}
.index-outils li:hover{padding-left:clamp(12px,1.4vw,20px)}
.index-outils li:hover::before{transform:scaleY(1)}
.index-rang{
  font-family:var(--serif);font-size:12.5px;font-weight:500;
  letter-spacing:.12em;color:var(--or);
}
.lavis{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:clamp(64px,5.4vw,82px);aspect-ratio:1;
  border-radius:9px;
  background:
    radial-gradient(72% 72% at 32% 24%, rgba(176,199,224,.62), transparent 70%),
    radial-gradient(84% 84% at 76% 84%, rgba(212,195,161,.55), transparent 72%),
    var(--carte-creuse);
  transition:transform .36s var(--sortie);
}
.lavis .ic{width:34px;height:34px;stroke-width:1.55}
.index-outils li:hover .lavis{transform:scale(1.05) rotate(-1.5deg)}
.index-outils h3{
  font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);font-weight:600;
  color:var(--navy-titre);margin-bottom:7px;line-height:1.28;
}
.index-outils p{font-size:14px;line-height:1.62;color:var(--texte-doux);max-width:52ch}

/* ─────────────── Déploiement ─────────────── */

.surtitre-filet{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:22px;
}
.surtitre-filet::before,.surtitre-filet::after{
  content:"";flex:1;height:1px;background:var(--bord);
  transform:scaleX(0);transition:transform 1s var(--sortie);
}
.surtitre-filet::before{transform-origin:right center}
.surtitre-filet::after{transform-origin:left center}
.surtitre-filet.vu::before,.surtitre-filet.vu::after{transform:scaleX(1)}
.surtitre-filet span{flex:0 1 auto}

.frise{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,34px);
  margin-top:clamp(38px,4.2vw,60px);
}
/* un seul filet traverse les quatre étapes, comme la ligne d'un calendrier */
.frise::before{
  content:"";position:absolute;left:0;right:0;top:14px;height:1px;
  background:var(--bord-clair);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.4s var(--sortie);
}
.frise.vue::before{transform:scaleX(1)}
.frise li{position:relative}
.frise-tete{display:flex;align-items:center;gap:12px}
/* le trait de liaison se dessine d'une étape à la suivante */
.frise-trait{
  flex:1;height:1px;min-width:12px;background:#ddd0b8;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .62s var(--sortie);
}
.frise.vue .frise-trait{transform:scaleX(1)}
.frise.vue li:nth-child(1) .frise-trait{transition-delay:.26s}
.frise.vue li:nth-child(2) .frise-trait{transition-delay:.48s}
.frise.vue li:nth-child(3) .frise-trait{transition-delay:.70s}

.frise .pastille{
  display:grid;place-items:center;
  flex:0 0 auto;
  width:29px;height:29px;
  border:1px solid var(--or);border-radius:50%;
  color:var(--or-texte);
  font-family:var(--serif);font-size:14px;font-weight:600;
  background:var(--carte);
  transform:scale(.4);opacity:0;
  transition:transform .55s var(--sortie),opacity .4s ease;
}
.frise.vue .pastille{transform:scale(1);opacity:1}
.frise.vue li:nth-child(2) .pastille{transition-delay:.18s}
.frise.vue li:nth-child(3) .pastille{transition-delay:.36s}
.frise.vue li:nth-child(4) .pastille{transition-delay:.54s}

.frise h3{
  font-family:var(--sans);font-size:14.5px;font-weight:700;
  color:var(--navy-titre);
  white-space:nowrap;
}
.frise p{margin-top:13px;font-size:13px;line-height:1.55;color:var(--texte-doux);max-width:26ch}

/* ─────────────── Pour qui ─────────────── */

.grille-communes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);align-items:start}
/* le décalage n'est pas décoratif : il dit la montée en taille des territoires */
.grille-escalier > li:nth-child(2){margin-top:clamp(10px,1.4vw,22px)}
.grille-escalier > li:nth-child(3){margin-top:clamp(20px,2.8vw,44px)}
.carte-commune{
  overflow:hidden;display:flex;flex-direction:column;
  background:transparent;border:0;box-shadow:none;border-radius:0;
}
.carte-commune img{border-radius:8px;border:1px solid var(--bord-clair)}
.carte-commune:hover{transform:none;box-shadow:none;border-color:transparent}
.carte-commune .carte-corps{border-top:1px solid var(--bord-clair);margin-top:clamp(13px,1.4vw,18px)}
.carte-commune img{
  width:100%;aspect-ratio:820/392;object-fit:cover;object-position:center 54%;
  transition:transform .7s var(--sortie);
}
.carte-commune:hover img{transform:scale(1.035)}
.carte-corps{padding:clamp(15px,1.4vw,20px) clamp(15px,1.4vw,20px) clamp(18px,1.7vw,24px)}
.carte-commune .carte-corps{padding:clamp(13px,1.4vw,18px) 0 0}
.carte-commune h3{
  font-family:var(--serif);font-size:16px;font-weight:600;
  color:var(--navy-titre);margin-bottom:8px;
}
.carte-commune p{font-size:13.5px;line-height:1.55;color:var(--texte-doux)}

/* ─────────────── Ressources ───────────────
   Deux entrées d'index plutôt que deux cartes, et l'inscription devient un
   bandeau creusé sur toute la largeur : c'est le dernier geste de la page. */

.ressources-haut{
  display:grid;
  grid-template-columns:minmax(260px,.82fr) minmax(0,2fr);
  gap:clamp(26px,3vw,58px);
  align-items:start;
}
.index-ressources{border-top:1px solid var(--bord-clair)}
.index-ressources li{
  display:grid;grid-template-columns:clamp(110px,13vw,190px) minmax(0,1fr);
  gap:clamp(16px,2vw,30px);
  align-items:center;
  padding-block:clamp(16px,1.8vw,26px);
  border-bottom:1px solid var(--bord-clair);
}
.index-ressources img{
  width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 46%;
  border-radius:7px;border:1px solid var(--bord-clair);
  transition:transform .7s var(--sortie);
}
.index-ressources li:hover img{transform:scale(1.03)}
.etiquette{
  font-family:var(--serif);font-size:10.5px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--or-texte);margin-bottom:9px;
}
.index-ressources h3{
  font-family:var(--serif);font-size:clamp(17px,1.55vw,21px);font-weight:600;
  line-height:1.28;color:var(--navy-titre);
}
.resume{margin-top:9px;font-size:13.5px;line-height:1.62;color:var(--texte-doux);max-width:56ch}

.encart-lettre{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;
  gap:clamp(20px,3vw,54px);
  margin-top:clamp(34px,4vw,58px);
  padding:clamp(24px,2.6vw,38px) clamp(24px,2.8vw,44px);
  background:var(--carte-creuse);
  border:1px solid var(--bord-clair);
  border-radius:var(--rayon);
}
.encart-entete{display:flex;align-items:flex-start;gap:16px}
.ic-enveloppe{width:40px;height:40px;flex:0 0 auto;color:var(--navy);stroke-width:1.5}
.encart-titre{
  font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);font-weight:600;
  color:var(--navy-titre);margin-bottom:7px;
}
.encart-titre strong{font-weight:600}
.encart-texte{font-size:13.5px;line-height:1.6;color:var(--texte-doux);max-width:44ch}
.encart-champs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px}
.encart-lettre input{
  width:100%;padding:11px 14px;
  border:1px solid var(--bord);border-radius:6px;
  background:#fdfbf7;
  font-size:13.5px;color:var(--navy-titre);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.encart-lettre input::placeholder{color:#a49c8f}
.encart-lettre input:focus{outline:none;border-color:var(--navy-clair);box-shadow:0 0 0 3px rgba(29,71,114,.12)}
.encart-lettre .bouton{padding:11px 20px;font-size:13.5px}
.encart-retour{grid-column:1/-1;margin-top:4px;font-size:12.5px;color:var(--or-texte)}

/* ─────────────── Ponctuation ───────────────
   Dix mille pixels de papier appellent un contraste de valeur, au milieu
   du parcours. Une phrase, pas une offre : rien à cliquer ici. */

.ponctuation{
  position:relative;overflow:hidden;
  background:var(--navy);
  color:#f2ead9;
  padding-block:clamp(46px,5.4vw,86px);
  text-align:center;
}
.ponctuation::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 120% at 50% 0%, rgba(185,145,74,.16), transparent 66%),
    radial-gradient(46% 100% at 50% 100%, rgba(185,145,74,.10), transparent 64%);
  pointer-events:none;
}
.ponctuation .conteneur{position:relative;z-index:2}
.tricolore-fin{
  display:inline-flex;width:74px;height:2.5px;border-radius:2px;overflow:hidden;
  margin-bottom:clamp(20px,2.4vw,30px);
  transform:scaleX(0);transform-origin:center;
  transition:transform .9s var(--sortie);
}
.ponctuation.vue .tricolore-fin{transform:scaleX(1)}
.tricolore-fin i{flex:1}
.tricolore-fin .t-bleu{background:#3d74b0}
.tricolore-fin .t-blanc{background:#e9e0cf}
.tricolore-fin .t-rouge{background:#c9484f}
.ponctuation p{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,3.1vw,42px);line-height:1.24;letter-spacing:-.012em;
  color:#f7f1e3;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--sortie) .1s,transform .9s var(--sortie) .1s;
}
.ponctuation.vue p{opacity:1;transform:none}
.point-clair{color:#d3a459}
.ponctuation-note{
  display:block;max-width:56ch;margin:clamp(18px,2vw,26px) auto 0;
  font-size:14px;line-height:1.7;color:rgba(238,229,211,.72);
  opacity:0;transition:opacity .9s ease .34s;
}
.ponctuation.vue .ponctuation-note{opacity:1}

/* ─────────────── Appel ─────────────── */

.appel{
  position:relative;overflow:hidden;
  background:var(--navy);
  color:#f2ead9;
  padding-block:clamp(44px,4.6vw,68px);
}
.appel-decor{
  position:absolute;right:-1%;bottom:-8%;
  width:min(42%,548px);height:auto;
  opacity:.42;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 46%,#000 100%),
                     linear-gradient(to bottom,transparent 0,#000 40%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 46%,#000 100%),
                     linear-gradient(to bottom,transparent 0,#000 40%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transition:transform .2s linear;
}
.appel-grille{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,2.2vw,34px);
  align-items:center;
}
.appel-marianne{width:clamp(84px,8.6vw,126px);height:auto;opacity:.96}
.appel-texte h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(21px,2.1vw,28px);line-height:1.28;
  color:#f7f1e3;
}
.appel-texte p{
  margin-top:12px;
  font-size:14.5px;line-height:1.62;
  color:rgba(238,229,211,.8);
  max-width:58ch;
}
.appel-actions{display:flex;flex-wrap:wrap;gap:13px}
/* max-width borné : sans lui, la note en une ligne gonfle la colonne auto de la grille et écrase le titre */
.appel-note{flex:1 1 100%;max-width:34ch;margin-top:6px;font-size:12.5px;line-height:1.6;color:rgba(246,239,225,.72)}

/* ─────────────── Pied ─────────────── */

.pied{padding-block:clamp(40px,4.2vw,60px) 26px;border-top:1px solid var(--bord-clair)}
.pied-grille{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,.85fr)) minmax(0,1fr);
  gap:clamp(20px,2.4vw,40px);
}
.pied-marque img{width:clamp(160px,13vw,196px);margin-bottom:16px}
.pied-marque p{font-size:12.5px;line-height:1.6;color:var(--texte-doux)}
.pied-marque .drapeau-pied{margin-top:14px}

.pied-titre{
  font-size:12.5px;font-weight:700;color:var(--navy-titre);
  margin-bottom:14px;
}
.pied-colonne{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.pied-colonne a,.pied-colonne .lien-inactif{font-size:12.5px;color:var(--texte-doux);transition:color .22s ease}
.pied-colonne a:hover{color:var(--navy)}

.reseaux{display:flex;gap:9px}
.rond{
  display:grid;place-items:center;
  width:30px;height:30px;border:1px solid #ddd0b8;border-radius:50%;
  color:var(--navy);
}
.rond svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pied-heberge{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:12.5px;color:var(--texte-doux)}
.pied-heberge .drapeau{height:12px;width:19px}

.pied-mention{
  margin-top:clamp(30px,3.4vw,46px);
  padding-top:20px;
  border-top:1px solid var(--bord-clair);
  text-align:center;font-size:12px;color:var(--texte-doux);
}

/* ═══════════ Ce que nous venons faire ═══════════ */

.chapeau-centre{margin-inline:auto;text-align:center;max-width:64ch;margin-top:18px}
.surtitre-gauche{text-align:left}



/* ═══════════ Les trois étages ═══════════ */

.etages{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px);
  margin-top:clamp(34px,4vw,54px);
  align-items:stretch;
}
.carte-etage{
  display:flex;flex-direction:column;overflow:hidden;
  background:transparent;border:0;box-shadow:none;border-radius:0;
}
.carte-etage > img{border:1px solid var(--bord-clair);border-radius:8px;box-shadow:var(--ombre-carte)}
.carte-etage:hover{transform:none;box-shadow:none;border-color:transparent}
.carte-etage:hover > img{box-shadow:var(--ombre-levee);border-color:var(--or)}
.carte-etage > img{
  width:100%;aspect-ratio:1300/720;object-fit:cover;object-position:top center;
  transition:transform .7s var(--sortie),box-shadow .42s var(--sortie),border-color .42s ease;
}
.carte-etage:hover > img{transform:scale(1.025)}
.carte-etage .carte-corps{display:flex;flex-direction:column;flex:1;padding:clamp(16px,1.6vw,22px) 0 0}
.etage-rang{
  display:flex;align-items:baseline;gap:11px;
  font-family:var(--serif);font-size:11px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--or-texte);
}
.etage-rang i{
  font-style:normal;font-size:clamp(21px,2vw,28px);font-weight:600;
  letter-spacing:.02em;color:var(--or);opacity:.42;line-height:1;
  transition:opacity .42s var(--sortie);
}
.carte-etage:hover .etage-rang i{opacity:.85}
.carte-etage h3{
  font-family:var(--serif);font-size:19px;font-weight:600;
  color:var(--navy-titre);margin:7px 0 12px;
}
.puces{display:grid;gap:8px;flex:1;margin-bottom:16px}
.puces li{
  position:relative;padding-left:17px;
  font-size:13.5px;line-height:1.55;color:var(--texte-doux);
}
.puces li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--or);
}
.carte-etage .bouton{align-self:flex-start}

/* l'urbanisme, et le plan qui sert des deux côtés */
.urbanisme-exemple{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);
  gap:clamp(28px,3.4vw,60px);
  align-items:center;
  margin-top:clamp(38px,4.4vw,64px);
}
.urbanisme-exemple .titre-section{margin-top:13px}
.urbanisme-exemple p{margin-top:16px;font-size:15px;line-height:1.74;color:#414d5c}
.urbanisme-exemple .modulaire{
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--bord-clair);
  font-size:14px;color:var(--texte-doux);
}

.plan-cadre{
  background:var(--carte);
  border:1px solid var(--bord-clair);border-radius:var(--rayon-large);
  box-shadow:var(--ombre-ecran);
  overflow:hidden;
}
.plan-cadre img{
  width:100%;height:auto;display:block;
  transition:transform .8s var(--sortie);
}
.plan-cadre a:hover img{transform:scale(1.02)}
.plan-barre{
  display:flex;align-items:center;gap:7px;
  padding:9px 13px;
  background:var(--carte-creuse);
  border-bottom:1px solid var(--bord-clair);
}
.plan-barre i{width:9px;height:9px;border-radius:50%;background:#ddd0b8;flex:none}
.plan-barre em{
  flex:1;text-align:center;font-style:normal;
  font-size:11.5px;color:var(--texte-doux);
}
.plan-pied{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px clamp(15px,1.4vw,20px);
}
.plan-pied p{font-size:13.5px;line-height:1.58;color:var(--texte-doux);max-width:56ch}
.plan-pied b{color:var(--navy-titre)}

.aveu{
  max-width:84ch;margin:clamp(30px,3.4vw,48px) auto 0;
  padding:clamp(16px,1.6vw,22px) clamp(18px,2vw,28px);
  background:var(--carte-creuse);
  border-left:3px solid var(--navy);
  border-radius:0 10px 10px 0;
  font-size:13.5px;line-height:1.66;color:var(--texte);
}
.aveu b{color:var(--navy-titre)}

/* ═══════════ Sous bonne garde ═══════════ */

.prix{
  max-width:70ch;margin:clamp(24px,2.6vw,34px) auto 0;
  text-align:center;font-size:14.5px;line-height:1.7;color:var(--texte-doux);
}
.prix b{color:var(--navy-titre)}

/* ═══════════ Les époques ═══════════ */

.siecles{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.5vw,24px);
  margin-top:clamp(38px,4.6vw,62px);
  counter-reset:siecle;
}
.siecles li{
  position:relative;
  padding-top:30px;
  text-align:center;
}
.siecles li::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%) scale(.3);
  width:11px;height:11px;border-radius:50%;
  background:var(--carte);border:1.5px solid var(--or);
  opacity:0;
  transition:transform .5s var(--sortie),opacity .4s ease;
}
.siecles li::after{
  content:"";position:absolute;top:13px;left:calc(50% + 12px);
  width:calc(100% - 24px);height:1px;background:#d9cbb2;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .6s var(--sortie);
}
.siecles li:last-child::after{display:none}
.siecles.vue li::before{opacity:1;transform:translateX(-50%) scale(1)}
.siecles.vue li::after{transform:scaleX(1)}
.siecles.vue li:nth-child(2)::before{transition-delay:.14s}
.siecles.vue li:nth-child(3)::before{transition-delay:.28s}
.siecles.vue li:nth-child(4)::before{transition-delay:.42s}
.siecles.vue li:nth-child(5)::before{transition-delay:.56s}
.siecles.vue li:nth-child(1)::after{transition-delay:.1s}
.siecles.vue li:nth-child(2)::after{transition-delay:.24s}
.siecles.vue li:nth-child(3)::after{transition-delay:.38s}
.siecles.vue li:nth-child(4)::after{transition-delay:.52s}
.siecles li.ici::before{background:var(--or);border-color:var(--or);width:15px;height:15px;top:6px}
.siecles b{
  display:block;font-family:var(--serif);font-size:clamp(15.5px,1.35vw,17.5px);font-weight:600;
  color:var(--navy-titre);line-height:1.3;
}
.siecles span{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--texte-doux)}
.siecles li.ici b{color:var(--or-texte)}

/* ═══════════ Manifeste et fondateurs ═══════════ */

.manifeste .titre-section{font-size:clamp(29px,3.5vw,45px);line-height:1.16}
.manifeste .chapeau-centre{font-size:clamp(15px,1.35vw,17.5px);line-height:1.8;max-width:60ch}

.fondateurs{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(22px,3.4vw,58px);
  margin-top:clamp(32px,3.8vw,52px);
}
.fondateur{text-align:center}
.fondateur .nom{
  font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);font-weight:600;
  color:var(--navy-titre);
}
.fondateur .role{
  margin-top:5px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-texte);
}
.fondateurs-filet{
  width:1px;height:44px;background:var(--bord);flex:none;
}
/* Le paraphe se trace à la plume quand le manifeste entre à l'écran.
   C'est une fioriture, pas la signature de quelqu'un. */
.paraphe{
  display:block;
  width:clamp(210px,20vw,300px);height:auto;
  margin:clamp(18px,2vw,26px) auto 0;
  color:var(--or);
}
.paraphe path{
  stroke-dasharray:520;
  stroke-dashoffset:520;
  transition:stroke-dashoffset 2.1s cubic-bezier(.55,.06,.3,1);
}
.paraphe path:last-child{stroke-dasharray:60;stroke-dashoffset:60;transition-delay:1.5s;transition-duration:.7s}
.paraphe.vu path{stroke-dashoffset:0}

.fondateurs-mot{
  margin-top:clamp(16px,1.8vw,22px);
  text-align:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(15px,1.3vw,17.5px);line-height:1.65;color:#2f3b4b;
}

/* ═══════════ Révélations au défilement ═══════════ */

.revele,[data-cascade] > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .78s var(--sortie),transform .78s var(--sortie);
}
.revele.vu,[data-cascade] > *.vu{opacity:1;transform:none}

/* le tableau de bord et le mobile n'entrent pas du même côté */
.ecran-bureau{transform:translateY(24px) translateX(-16px)}
.ecran-mobile{transform:translateY(30px) translateX(20px)}
.ecran-bureau.vu,.ecran-mobile.vu{transform:none}
.ecran-mobile{transition-delay:.16s}

/* ═══════════ Adaptations ═══════════ */

@media (max-width:1180px){
  .planche{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feuillet:nth-child(1),.feuillet:nth-child(5){grid-column:span 2}
  .ressources-haut{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:1080px){
  .nav{display:none}
  .entete-actions{display:none}
  .entete-menu{display:grid;place-items:center;margin-left:auto}
  .menu-mobile:not([hidden]){display:flex}
}

@media (max-width:1000px){
  :root{--entete-h:72px}
  .etages{grid-template-columns:minmax(0,1fr)}
  .volets{grid-template-columns:minmax(0,1fr)}
  .volets li{border-left:0;padding-inline:0;padding-block:clamp(18px,2vw,26px);border-top:1px solid var(--bord-clair)}
  .volets li:first-child{border-top:0;padding-top:0}
  .volets p{max-width:none}
  .blasons{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 0}
  .blasons li:nth-child(4){border-left:0}
  .produit > .conteneur{padding-left:var(--marge)}
  .produit-ecrans{padding-left:0}
  .carte-etage > img{aspect-ratio:1300/560}
  .urbanisme-exemple{grid-template-columns:minmax(0,1fr)}
  .siecles{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .siecles li::after{display:none}
  .grille-escalier > li:nth-child(2),.grille-escalier > li:nth-child(3){margin-top:0}
  .hero{padding-block:30px 34px}
  .hero-visuel{margin-top:22px}
  .hero-texte{max-width:none}
  .hero-chapeau{max-width:52ch}
  .reassurances li:first-child{padding-left:0}

  .produit-grille,.duo,.duo-tiers{grid-template-columns:minmax(0,1fr)}
  .produit-ecrans{order:2}
  .produit-texte{order:1}
  .citation{padding-left:0;padding-top:26px;border-left:0;border-top:1px solid var(--bord)}
  .frise{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .frise li:nth-child(2)::after{display:none}
  .appel-grille{grid-template-columns:auto minmax(0,1fr)}
  .appel-actions{grid-column:1/-1}
  .pied-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pied-marque{grid-column:1/-1}
}

@media (max-width:760px){
  body{font-size:16px}
  .planche{grid-template-columns:minmax(0,1fr)}
  .feuillet:nth-child(1),.feuillet:nth-child(5){grid-column:span 1}
  .index-outils li{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .index-outils .lavis{grid-row:1;grid-column:2;justify-self:start}
  .index-outils div{grid-column:1/-1}
  .blasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blasons li{border-left:0}
  .fondateurs{flex-direction:column;gap:18px}
  .fondateurs-filet{width:56px;height:1px}
  .grille-communes{grid-template-columns:minmax(0,1fr)}
  .encart-lettre{grid-template-columns:minmax(0,1fr)}
  .encart-champs{grid-template-columns:minmax(0,1fr)}
  .blasons{grid-template-columns:repeat(3,1fr);gap:22px 12px}
  .reassurances{flex-wrap:wrap;gap:22px 0}
  .reassurances li{flex:0 0 50%;border-left:0;padding-inline:8px}
  .appel-grille{grid-template-columns:minmax(0,1fr)}
  .appel-marianne{width:82px}
  .frise li{padding-right:0}
  .frise li::after{display:none}
  .carte-commune img{aspect-ratio:820/330}
}

@media (max-width:620px){
  /* le tableau de bord reprend toute la largeur, le mobile se pose dessus */
  .produit-ecrans{display:block;position:relative}
  .ecran-bureau{width:87%}
  .ecran-mobile{position:absolute;right:0;bottom:-8px;width:27%}
  .ecran-bureau,.ecran-mobile{transform:none}
}

@media (max-width:520px){
  .hero-titre{font-size:clamp(28px,9.2vw,38px)}
  .index-ressources li{grid-template-columns:minmax(0,1fr);gap:12px}
  .frise{grid-template-columns:minmax(0,1fr);gap:26px}
  .frise h3{white-space:normal}
  .frise-trait{display:none}
  .blasons{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════ Mouvement réduit ═══════════ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .revele,[data-cascade] > *,.hero-mairie,.hero .fleuron-gauche{opacity:1;transform:none}
  .hero-titre .mot{transform:none}
  .tricolore{transform:translateX(-50%) scaleX(1)}
  .fleuron .trait-g,.fleuron .trait-d{transform:scaleX(1)}
  .fleuron .coeur,.fleuron .pastille,.fleuron .aile-g,.fleuron .aile-d{opacity:1}
  .frise .pastille{transform:scale(1);opacity:1}
  .frise li::after,.surtitre-filet::before,.surtitre-filet::after{transform:scaleX(1)}
  .paraphe path{stroke-dashoffset:0}
  .tricolore-fin{transform:scaleX(1)}
  .ponctuation p{opacity:1;transform:none}
  .ponctuation-note{opacity:1}
  .siecles li::before{opacity:1;transform:translateX(-50%) scale(1)}
  .siecles li::after{transform:scaleX(1)}
  .ec-pastille{transform:scale(1)}
}

/* ═══════════════════════════════════════════════════════════════
   LE DOSSIER — sections ajoutées le 1er septembre 2026
   Guichet, site de la collectivité, espace citoyen, deux vues, modules,
   commerces, jumeau, comparatif, fondateurs, sécurité, questions.
   ═══════════════════════════════════════════════════════════════ */

/* ── La vitre : un écran vivant posé dans la page ────────────── */
.vitre{
  background:var(--carte);
  border:1px solid var(--bord-clair);
  border-radius:var(--rayon-large);
  box-shadow:var(--ombre-ecran);
  overflow:hidden;
}
.vitre-barre{
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;
  background:var(--carte-creuse);
  border-bottom:1px solid var(--bord-clair);
}
.vitre-points{display:flex;gap:6px;flex:none}
.vitre-points i{width:9px;height:9px;border-radius:50%;background:#ddd0b8}
.vitre-url{
  flex:1;text-align:center;
  font-size:11.5px;color:var(--texte-doux);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vitre-etat{
  flex:none;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--or-texte);
}
.vitre-ecran{
  position:relative;overflow:hidden;
  height:clamp(280px,42vw,560px);
  background:var(--papier);
  --echelle:.85;
}
.vitre-ecran-haute{height:clamp(340px,52vw,680px)}
.vitre-ecran-plan{height:clamp(300px,46vw,600px);--echelle:1}
.vitre-ecran iframe{
  position:absolute;top:0;left:0;display:block;border:0;
  width:calc(100% / var(--echelle));
  height:calc(100% / var(--echelle));
  transform:scale(var(--echelle));
  transform-origin:0 0;
  pointer-events:none;
}
/* le plan se manipule vraiment : on le tourne, on clique un bâtiment */
.vitre-ecran-plan iframe{pointer-events:auto}
.duo-vues .vitre-ecran{--echelle:.44}
.vitre-etroite .vitre-ecran{--echelle:.52}
.vitre-lien{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 16px;
  border-top:1px solid var(--bord-clair);
  background:var(--carte-creuse);
  font-size:13.5px;font-weight:700;color:var(--navy-titre);
  transition:background .3s ease,gap .3s var(--sortie);
}
.vitre-lien:hover{background:var(--papier-creux);gap:14px}
.vitre-lien .fleche{color:var(--or-texte)}
.vitre-large{margin-top:clamp(30px,3.6vw,48px)}

/* ── II · Les gestes du guichet ──────────────────────────────── */
.gestes{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--bord-clair);
  border:1px solid var(--bord-clair);border-radius:var(--rayon);
  overflow:hidden;
  margin-top:clamp(34px,4vw,54px);
}
.gestes li{
  background:var(--carte);
  padding:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;gap:9px;
  transition:background .35s ease;
}
.gestes li:hover{background:var(--carte-creuse)}
.ic-geste{width:28px;height:28px;color:var(--or-texte);stroke-width:1.5}
.gestes b{
  font-family:var(--serif);font-size:16px;font-weight:600;
  color:var(--navy-titre);line-height:1.3;
}
.gestes span{font-size:13.5px;line-height:1.6;color:var(--texte-doux)}


/* ── IV · L'espace citoyen ───────────────────────────────────── */
.citoyen-grille{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,4.6vw,80px);align-items:center;
}
.citoyen-texte .chapeau{margin-top:18px}
.citoyen-texte .liste-cochee{margin-top:clamp(20px,2.2vw,28px)}
.note-connexion{
  margin-top:clamp(18px,2vw,26px);
  padding:14px 18px;
  background:var(--carte-creuse);border-left:3px solid var(--navy);
  border-radius:0 8px 8px 0;
  font-size:14px;line-height:1.62;
}
.note-connexion b{color:var(--navy-titre)}
.citoyen-texte .bouton{margin-top:clamp(22px,2.4vw,30px)}
.citoyen-ecrans{position:relative;display:flex;justify-content:flex-end}
.citoyen-ecrans .vitre-etroite{width:100%}
.ecran-mobile-pose{
  position:absolute;right:-14px;bottom:-30px;
  width:clamp(150px,17vw,208px);
  z-index:2;
}

/* ── V · Les deux vues ───────────────────────────────────────── */
.duo-vues{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,36px);
  margin-top:clamp(34px,4vw,54px);
  align-items:start;
}
.vue-corps{padding-top:clamp(16px,1.8vw,24px)}
.vue-rang{
  display:flex;align-items:center;gap:11px;
  font-family:var(--serif);font-size:12.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--or-texte);
}
.vue-rang i{
  font-style:normal;font-size:22px;letter-spacing:0;
  color:var(--navy-titre);opacity:.3;
}
.vue-corps h3{
  font-family:var(--serif);font-size:20px;font-weight:600;
  color:var(--navy-titre);margin:9px 0 14px;line-height:1.3;
}
.vue-corps .bouton{margin-top:4px}

/* ── VI · Les modules ────────────────────────────────────────── */
.grille-modules{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.7vw,24px);
  margin-top:clamp(34px,4vw,54px);
}
.grille-modules li{
  background:var(--carte);
  border:1px solid var(--bord-clair);border-radius:var(--rayon);
  padding:clamp(16px,1.8vw,22px);
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .35s ease,box-shadow .35s var(--sortie),transform .35s var(--sortie);
}
.grille-modules li:hover{border-color:var(--or);box-shadow:var(--ombre-carte);transform:translateY(-2px)}
.grille-modules .ic{width:26px;height:26px;color:var(--navy-clair);stroke-width:1.5}
.grille-modules b{
  font-family:var(--serif);font-size:15.5px;font-weight:600;
  color:var(--navy-titre);line-height:1.3;
}
.grille-modules span{font-size:13px;line-height:1.58;color:var(--texte-doux)}
.module-ouvert{background:var(--carte-creuse);border-style:dashed}
.module-ouvert .ic{color:var(--or-texte)}
.tailles{margin-top:clamp(48px,5.4vw,78px)}
.tailles .grille-communes{margin-top:clamp(26px,3vw,40px)}

/* ── VII · Le relevé des commerces ───────────────────────────── */
.releve{
  margin-top:clamp(34px,4vw,52px);
  background:var(--carte);
  border:1px solid var(--bord-clair);border-radius:var(--rayon-large);
  padding:clamp(22px,2.6vw,38px);
}
.releve-titre{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--or-texte);
  padding-bottom:16px;border-bottom:1px solid var(--bord-clair);
}
.releve-chiffres{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,32px);
  margin-top:clamp(20px,2.2vw,30px);
}
.releve-chiffres li{display:flex;flex-direction:column;gap:6px}
.releve-chiffres b{
  font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);font-weight:600;
  color:var(--navy-titre);line-height:1;
  font-variant-numeric:tabular-nums;
}
.releve-chiffres span{font-size:13.5px;line-height:1.55;color:var(--texte-doux)}
.releve-chiffres .alerte b{color:var(--rouge)}
.barre{display:block;height:4px;background:var(--bord-clair);border-radius:2px;overflow:hidden;margin-top:4px}
.barre em{display:block;height:100%;background:var(--navy-clair);border-radius:2px}
.alerte .barre em{background:var(--rouge)}
.releve-note{
  margin-top:clamp(20px,2.2vw,28px);padding-top:18px;
  border-top:1px solid var(--bord-clair);
  font-size:14.5px;line-height:1.7;color:var(--texte);
}
.recherche-q{
  font-size:13px;color:var(--navy-titre);
  padding:8px 12px;background:var(--carte);
  border:1px solid var(--bord-clair);border-radius:999px;
}
.recherche-ko,.recherche-ok{font-size:12.5px;line-height:1.55;padding-left:13px;position:relative}
.recherche-ko::before,.recherche-ok::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;
}
.recherche-ko::before{background:var(--rouge)}
.recherche-ok::before{background:#3f7d52}
.recherche-ko b,.recherche-ok b{display:block;color:var(--navy-titre)}

/* ── VIII · Ce que la collectivité offre ─────────────────────── */
.offre-points{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);
  margin-top:clamp(34px,4vw,52px);
}
.offre-points li{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(18px,2vw,26px);
  background:var(--carte);border:1px solid var(--bord-clair);
  border-radius:var(--rayon);
}
.offre-points b{
  font-family:var(--serif);font-size:17.5px;font-weight:600;color:var(--navy-titre);
}
.offre-points span{font-size:14.5px;line-height:1.68;color:var(--texte-doux)}

/* ── IX · Les usages du plan ─────────────────────────────────── */
.usages-plan{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.6vw,38px);
  margin-top:clamp(34px,4vw,52px);
}
.usages-plan li{display:flex;flex-direction:column;gap:11px}
.usages-plan .ic{width:30px;height:30px;color:var(--or-texte);stroke-width:1.5}
.usages-plan h3{
  font-family:var(--serif);font-size:18px;font-weight:600;
  color:var(--navy-titre);line-height:1.3;
}
.usages-plan p{font-size:14px;line-height:1.68;color:var(--texte-doux)}

/* ── X · Le comparatif ───────────────────────────────────────── */
.bascule{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.72fr);
  gap:clamp(20px,2.6vw,40px);align-items:center;
  margin-top:clamp(34px,4vw,52px);
}
.bascule-avant,.bascule-apres{
  background:var(--carte);border:1px solid var(--bord-clair);
  border-radius:var(--rayon-large);padding:clamp(20px,2.4vw,32px);
}
.bascule-apres{
  background:var(--navy);border-color:var(--navy);color:#f6efe3;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.bascule-titre{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--or-texte);margin-bottom:16px;
}
.bascule-apres .bascule-titre{color:#d9c08a;margin-bottom:0}
.jetons{display:flex;flex-wrap:wrap;gap:8px}
.jetons li{
  font-size:13px;color:var(--texte-doux);
  padding:7px 13px;background:var(--papier-creux);
  border:1px solid var(--bord-clair);border-radius:999px;
}
.bascule-note{margin-top:18px;font-size:13.5px;line-height:1.62;color:var(--texte-doux)}
.bascule-fleche{font-size:26px;color:var(--or);line-height:1}
.bascule-marque{width:min(220px,74%);height:auto;opacity:.96}
.bascule-un{font-family:var(--serif);font-size:18px;line-height:1.45;color:#f6efe3}

.tableau-cadre{
  margin-top:clamp(30px,3.4vw,46px);
  overflow-x:auto;
  border:1px solid var(--bord-clair);border-radius:var(--rayon-large);
  background:var(--carte);
}
.tableau-compare{width:100%;border-collapse:collapse;min-width:640px}
.tableau-compare th,.tableau-compare td{
  padding:13px clamp(14px,1.6vw,22px);
  text-align:left;font-size:14px;line-height:1.5;
  border-bottom:1px solid var(--bord-clair);
}
.tableau-compare thead th{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--or-texte);font-weight:500;
  background:var(--carte-creuse);
}
.tableau-compare tbody th{font-weight:600;color:var(--navy-titre);width:34%}
.tableau-compare td{color:var(--texte-doux)}
.tableau-compare td.oui{color:var(--navy-titre);font-weight:600;position:relative;padding-left:38px}
.tableau-compare td.oui::before{
  content:"";position:absolute;left:clamp(14px,1.6vw,22px);top:1.15em;
  width:13px;height:7px;border-left:2px solid var(--or);border-bottom:2px solid var(--or);
  transform:rotate(-45deg);
}
.tableau-compare tr:last-child th,.tableau-compare tr:last-child td{border-bottom:0}
.tableau-compare .trou th{color:var(--rouge)}
.tableau-compare .trou td:first-of-type{font-style:italic}

.prix-releve{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,2.6vw,38px);align-items:center;
  margin-top:clamp(30px,3.4vw,46px);
  padding:clamp(22px,2.6vw,34px);
  background:var(--carte-creuse);
  border:1px solid var(--bord-clair);border-radius:var(--rayon-large);
}
.prix-chiffre{
  font-family:var(--serif);font-size:clamp(34px,4.4vw,58px);font-weight:600;
  color:var(--rouge);line-height:1;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.prix-texte{font-size:14.5px;line-height:1.72;color:var(--texte)}
.prix-texte b{color:var(--navy-titre)}



/* ── XV · Les questions ──────────────────────────────────────── */
.faq-liste{
  max-width:none;margin-top:clamp(30px,3.6vw,48px);
  border-top:1px solid var(--bord-clair);
}
.faq-item{border-bottom:1px solid var(--bord-clair)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(16px,1.8vw,22px) 0;
  cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(16px,1.5vw,19px);font-weight:600;
  color:var(--navy-titre);line-height:1.35;
  transition:color .3s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--or);border-bottom:2px solid var(--or);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .3s var(--sortie);
}
.faq-item[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq-item summary:hover{color:var(--navy-clair)}
.faq-item p{
  padding:0 0 clamp(18px,2vw,24px);
  max-width:76ch;font-size:15px;line-height:1.78;color:var(--texte-doux);
}

/* ── Adaptations ─────────────────────────────────────────────── */
@media (max-width:1080px){
  .gestes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille-modules{grid-template-columns:repeat(3,minmax(0,1fr))}
  .releve-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .vitre-ecran{--echelle:.58}
  .duo-vues .vitre-ecran{--echelle:.5}
  .vitre-etroite .vitre-ecran{--echelle:.55}
  .citoyen-grille{grid-template-columns:minmax(0,1fr)}
  .citoyen-ecrans{justify-content:center;margin-top:clamp(28px,4vw,40px)}
  .ecran-mobile-pose{right:0;bottom:-22px}
  .duo-vues{grid-template-columns:minmax(0,1fr)}
  .usages-plan{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bascule{grid-template-columns:minmax(0,1fr)}
  .bascule-fleche{transform:rotate(90deg);justify-self:center}
  .prix-releve{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (max-width:760px){
  .vitre-ecran{--echelle:.45}
  .duo-vues .vitre-ecran{--echelle:.42}
  .vitre-etroite .vitre-ecran{--echelle:.45}
  .gestes{grid-template-columns:minmax(0,1fr)}
  .grille-modules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usages-plan,.offre-points{grid-template-columns:minmax(0,1fr)}
  .releve-chiffres{grid-template-columns:minmax(0,1fr)}
  .ecran-mobile-pose{position:static;width:min(210px,62%);margin:22px auto 0}
  .citoyen-ecrans{flex-direction:column;align-items:center}
  .portraits{gap:26px}
}
@media (max-width:520px){
  .grille-modules{grid-template-columns:minmax(0,1fr)}
  .vitre-etat{display:none}
}
@media (prefers-reduced-motion:reduce){
  .grille-modules li:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   LE RYTHME — trois fonds, et le rang gravé dans la marge
   Une page de dossier n'est pas un long ruban : elle alterne les
   pages claires, les pages creusées et les planches sombres, comme
   les cahiers d'un livre imprimé.
   ═══════════════════════════════════════════════════════════════ */

/* ── Le rang du chapitre, gravé au fond de la page ───────────── */
.section[data-rang]::before{
  content:attr(data-rang);
  position:absolute;
  top:clamp(-10px,-.6vw,4px);right:clamp(-46px,-2.4vw,-14px);
  font-family:var(--serif);font-weight:600;
  font-size:clamp(96px,14vw,222px);line-height:.78;
  letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:1px rgba(15,46,82,.075);
  pointer-events:none;user-select:none;
  z-index:0;
}
.section > .conteneur{position:relative;z-index:1}

/* ── La page creusée ─────────────────────────────────────────── */
.section.creux{background:var(--papier-creux)}

/* ── La planche sombre ───────────────────────────────────────── */
.section.sombre{
  /* la nuit, plus le fil tricolore posé au bord haut, à gauche */
  background-color:var(--navy);
  background-image:linear-gradient(90deg,#2b5f9e 0 33.33%,#e9e0cf 33.33% 66.66%,#b4232a 66.66%);
  background-size:clamp(84px,9vw,132px) 2px;
  background-repeat:no-repeat;
  background-position:0 0;
  color:#d8cfbe;
  border-bottom-color:rgba(246,239,226,.10);
  overflow:hidden;
}
.section.sombre::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(62% 90% at 82% 0%, rgba(185,145,74,.17), transparent 64%),
    radial-gradient(54% 86% at 6% 100%, rgba(29,71,114,.42), transparent 62%);
}
.section.sombre[data-rang]::before{-webkit-text-stroke-color:rgba(212,178,113,.14)}

.section.sombre .surtitre{color:#d4b271}
.section.sombre .titre-section,
.section.sombre h2,
.section.sombre h3,
.section.sombre b,
.section.sombre strong{color:#f6efe3}
.section.sombre .chapeau,
.section.sombre p{color:#c3bbac}
.section.sombre .point{color:#e0705c}
.section.sombre .fleuron{color:#a98c52}

/* les cartes deviennent des plaques translucides */
.section.sombre .grille-modules li,
.section.sombre .vitre,
.section.sombre .note-connexion,
.section.sombre .aveu{
  background:rgba(246,239,226,.045);
  border-color:rgba(246,239,226,.14);
}
.section.sombre .grille-modules li:hover{
  border-color:rgba(212,178,113,.55);
  background:rgba(246,239,226,.075);
  box-shadow:0 22px 46px -30px rgba(0,0,0,.7);
}
.section.sombre .module-ouvert{background:rgba(212,178,113,.07);border-style:dashed}
.section.sombre .grille-modules .ic{color:#d4b271}
.section.sombre .grille-modules span,
.section.sombre .usages-plan p{color:#b6ae9f}
.section.sombre .usages-plan .ic{color:#d4b271}
.section.sombre .garantie-rang{color:rgba(212,178,113,.5)}
.section.sombre .aveu{border-left-color:#d4b271;color:#c3bbac}
.section.sombre .aveu b{color:#f6efe3}
.section.sombre .note-connexion{border-left-color:#d4b271}
.section.sombre .surtitre-filet::before,
.section.sombre .surtitre-filet::after{background:rgba(246,239,226,.18)}
.section.sombre .liste-cochee li{color:#c9c1b2}
.section.sombre .coche{color:#d4b271}
.section.sombre .puces li{color:#b6ae9f}
.section.sombre .puces li::before{background:#d4b271}
.section.sombre .vue-rang{color:#d4b271}
.section.sombre .vue-rang i{color:#f6efe3;opacity:.28}

/* la vitre garde son verre, mais sa monture passe à la nuit */
.section.sombre .vitre-barre{background:rgba(246,239,226,.06);border-bottom-color:rgba(246,239,226,.13)}
.section.sombre .vitre-points i{background:rgba(246,239,226,.28)}
.section.sombre .vitre-url{color:#b6ae9f}
.section.sombre .vitre-etat{color:#d4b271}
.section.sombre .vitre-lien{
  background:rgba(246,239,226,.06);border-top-color:rgba(246,239,226,.13);color:#f6efe3;
}
.section.sombre .vitre-lien:hover{background:rgba(246,239,226,.11)}
.section.sombre .vitre-lien .fleche{color:#d4b271}

/* les boutons, sur la nuit */
.section.sombre .bouton-plein{background:#d4b271;color:#12283f;border-color:#d4b271}
.section.sombre .bouton-plein:hover{background:#e2c489;border-color:#e2c489}
.section.sombre .bouton-ligne{border-color:rgba(246,239,226,.32);color:#f6efe3}
.section.sombre .bouton-ligne:hover{border-color:#d4b271;background:rgba(212,178,113,.12)}

/* ── Les deux magasins d'applications ────────────────────────── */
.magasins{margin-top:clamp(24px,2.8vw,34px)}
.magasins-mot{
  font-family:var(--serif);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#d4b271;margin-bottom:13px;
}
.magasins-jetons{display:flex;flex-wrap:wrap;gap:12px}
.jeton-app{
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 18px 9px 15px;
  border:1px solid rgba(246,239,226,.26);border-radius:9px;
  background:rgba(246,239,226,.05);
  transition:border-color .35s ease,background .35s ease;
}
.jeton-app:hover{border-color:#d4b271;background:rgba(212,178,113,.1)}
.jeton-app svg{width:23px;height:23px;flex:none;color:#f6efe3}
.jeton-app svg .plein{fill:currentColor;stroke:none}
.jeton-app span{display:flex;flex-direction:column;line-height:1.15}
.jeton-app i{font-style:normal;font-size:10.5px;letter-spacing:.05em;color:#b6ae9f}
.jeton-app b{font-family:var(--serif);font-size:15px;font-weight:600;color:#f6efe3}

@media (max-width:760px){
  .section[data-rang]::before{font-size:clamp(84px,22vw,150px);right:-4px}
  .magasins-jetons{gap:9px}
  .jeton-app{padding:8px 14px 8px 12px}
}

/* Les aquarelles posées sur une planche sombre : on les traite comme des
   gravures tirées sur la même encre, plutôt que des vignettes claires
   découpées dans la nuit. */
.section.sombre .carte-commune img{
  filter:grayscale(1) sepia(.6) hue-rotate(174deg) saturate(2.4) brightness(.72) contrast(1.15);
  opacity:.58;
  mix-blend-mode:screen;
  border:1px solid rgba(212,178,113,.24);
  border-radius:8px;
  transition:filter .5s var(--sortie),border-color .4s ease;
}
.section.sombre .carte-commune:hover img{
  filter:grayscale(1) sepia(.6) hue-rotate(174deg) saturate(2.4) brightness(.86) contrast(1.15);
  opacity:.74;
  border-color:rgba(212,178,113,.5);
}
.section.sombre .carte-commune .carte-corps h3{color:#f6efe3}
.section.sombre .carte-commune .carte-corps p{color:#b6ae9f}
.section.sombre .grille-communes .carte{background:transparent;border-color:rgba(246,239,226,.14)}

/* ═══════════════════════════════════════════════════════════════
   LE DOSSIER, RELU — 4 septembre 2026
   Un titre, une ligne, un objet visuel par chapitre. Les encarts
   portent l'explication ; le texte ne fait que nommer.
   ═══════════════════════════════════════════════════════════════ */

/* ── I · Les époques portent un pictogramme, et les trois symptômes ── */
.ic-siecle{width:34px;height:34px;margin:0 auto 12px;color:var(--navy);stroke-width:1.5}
.siecles li.ici .ic-siecle{color:var(--or-texte)}
.symptomes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(40px,4.6vw,64px);
  border-top:1px solid var(--bord-clair);
}
.symptomes li{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:clamp(22px,2.4vw,32px) clamp(12px,1.6vw,24px) 0;
  text-align:center;
  border-left:1px solid var(--bord-clair);
}
.symptomes li:first-child{border-left:0}
.symptomes .ic{width:34px;height:34px;color:var(--or-texte);stroke-width:1.5;margin-bottom:4px}
.symptomes b{font-family:var(--serif);font-size:16.5px;font-weight:600;color:var(--navy-titre);line-height:1.3}
.symptomes span{font-size:13.5px;line-height:1.55;color:var(--texte-doux);max-width:26ch}

/* ── Une ligne d'aveu : un pictogramme, une phrase ── */
.aveu-ligne{display:flex;align-items:center;gap:14px;text-align:left}
.ic-aveu{width:28px;height:28px;flex:none;color:var(--or-texte);stroke-width:1.5}

/* ── III · Les normes en rangée de pictogrammes ── */
.pictos-rang{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  margin-top:clamp(30px,3.4vw,48px);
  border-top:1px solid var(--bord-clair);
}
.pictos-rang li{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:clamp(20px,2.2vw,28px) 8px 0;
  text-align:center;
  border-left:1px solid var(--bord-clair);
}
.pictos-rang li:first-child{border-left:0}
.pictos-rang .ic{width:32px;height:32px;color:var(--navy);stroke-width:1.5}
.pictos-rang b{font-size:13.5px;font-weight:700;color:var(--navy-titre);line-height:1.35}

/* ── IV · Alison, posée sur les écrans ── */
.alison-pose{position:absolute;z-index:3;height:auto;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(13,43,69,.25))}
.alison-question{left:-5%;bottom:-26px;width:clamp(104px,10.4vw,142px)}
.vue-corps-court h3{margin-bottom:16px}

/* ── VII · L'encart : un panneau, une idée, une phrase à retenir ── */
.encart{
  max-width:820px;margin:clamp(30px,3.4vw,46px) auto 0;
  background:var(--carte);
  border:1px solid var(--bord-clair);border-radius:var(--rayon-large);
  padding:clamp(22px,2.6vw,36px);
}
.encart-surtitre{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--or-texte);
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--bord-clair);
}
.encart-recherche .recherche-q{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--navy-titre);
  padding:10px 16px;background:var(--papier-creux);
  border:1px solid var(--bord-clair);border-radius:999px;
}
.ic-petit{width:18px;height:18px;flex:none;color:var(--or-texte);stroke-width:1.8}
.recherche-duo{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);
  margin-top:18px;
}
.recherche-duo p{font-size:14px;line-height:1.6;padding-left:16px}
.recherche-duo p::before{top:.6em;width:6px;height:6px}
.recherche-duo b{margin-bottom:3px}
.encart-retenir{
  display:inline-block;margin-top:20px;
  padding:9px 15px;
  background:var(--papier-creux);border:1px solid var(--bord);border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--navy-titre);
}

/* ── VIII · Les points de l'offre portent un pictogramme ── */
.offre-points .ic{width:30px;height:30px;color:var(--or-texte);stroke-width:1.5;margin-bottom:4px}

/* ── XII · Les six garanties en grille, sur le navy ── */
.garanties-grille{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.7vw,24px);
  margin-top:clamp(34px,4vw,54px);
}
.garanties-grille li{
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(20px,2.2vw,28px);
  background:rgba(246,239,225,.045);
  border:1px solid rgba(246,239,225,.14);border-radius:var(--rayon);
}
.garanties-grille .ic{width:30px;height:30px;color:#d9c08a;stroke-width:1.5;margin-bottom:4px}
.garanties-grille b{font-family:var(--serif);font-size:16.5px;font-weight:600;color:#f6efe3;line-height:1.3}
.garanties-grille span{font-size:13.5px;line-height:1.6;color:#b6ae9f}

/* ── XV · Les fondateurs : deux portraits en grand, fondus dans le papier
   comme l'aquarelle du hero. Le bonnet et la cocarde sont la Marianne. ── */
.diptyque{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(6px,1.6vw,22px);
  width:min(1120px,100%);
  margin:clamp(26px,3.2vw,44px) auto 0;
}
.fondateur{display:flex;flex-direction:column;align-items:center;gap:0}
.fondateur img{
  width:100%;height:auto;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 64% 71% at 50% 46%,#000 50%,rgba(0,0,0,.55) 74%,transparent 100%);
          mask-image:radial-gradient(ellipse 64% 71% at 50% 46%,#000 50%,rgba(0,0,0,.55) 74%,transparent 100%);
}
.fondateur figcaption{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;margin-top:-6%}
.manifeste .chapeau-centre{max-width:62ch}

@media (max-width:1000px){
  .symptomes{grid-template-columns:minmax(0,1fr);border-top:0}
  .symptomes li{border-left:0;border-top:1px solid var(--bord-clair);padding-bottom:clamp(18px,2vw,26px)}
  .symptomes li:first-child{border-top:1px solid var(--bord-clair)}
  .pictos-rang{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 0}
  .pictos-rang li:nth-child(4){border-left:0}
  .garanties-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alison-question{display:none}
}
@media (max-width:760px){
  .pictos-rang{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pictos-rang li:nth-child(odd){border-left:0}
  .pictos-rang li:nth-child(4){border-left:1px solid var(--bord-clair)}
  .garanties-grille{grid-template-columns:minmax(0,1fr)}
  .recherche-duo{grid-template-columns:minmax(0,1fr)}
  .diptyque{gap:4px}
  .fondateur figcaption{margin-top:-4%}
}

/* ── Le film du haut de page, à la place de l'aquarelle ──
   Même gabarit que l'image, mêmes bords fondus dans le papier. Il se joue
   une fois, sans son, et reste sur sa dernière image : la mairie en aquarelle. */
.hero-film{mix-blend-mode:normal;aspect-ratio:16/9;object-fit:cover;background:var(--papier)}


/* ── Le film se déroule au défilement ──
   La planche est POSÉE sur la page, elle ne l'occupe pas : même largeur
   contenue et mêmes bords enfumés que l'aquarelle qu'elle remplace, du papier
   visible au-dessus et en dessous. `.hero` porte overflow:hidden et
   contain:content pour ses bords fondus — les deux empêchent un enfant de se
   coller, on les lève sur cette piste-là.

   La piste tient en un écran de défilement de plus : le film se traverse d'un
   geste et ne retient personne. Il ne part jamais tout seul, et se rejoue
   seulement si on remonte. */
.hero:has(.hero-piste){overflow:visible;contain:none}
.hero-piste{position:relative;height:190vh}
.hero-piste .hero-visuel{
  position:sticky;top:0;height:100vh;
  width:min(1480px,94%);max-width:none;margin:0 auto;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.hero-piste .hero-film{
  display:block;width:100%;height:auto;max-height:88vh;object-fit:contain;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 4.5%,#000 94.5%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 4.5%,#000 94.5%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.hero-invite{
  position:sticky;top:calc(100vh - 58px);z-index:2;margin:0;
  text-align:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:#7a6f66;opacity:.85;transition:opacity .4s ease;
}
.hero-piste[data-fini] .hero-invite{opacity:0}

/* Sans mouvement, pas de piste : l'aquarelle de fin, et la page continue. */
@media (prefers-reduced-motion:reduce){
  .hero-piste{height:auto}
  .hero-piste .hero-visuel{position:static;height:auto;display:block}
  .hero-invite{display:none}
}
@media (max-width:900px){.hero-piste{height:170vh}}


/* ═══════════ I · La chronologie, puis son bilan ═══════════
   Le reproche était juste : la frise et ses conséquences se lisaient d'un seul
   tenant, comme si « l'habitant se déplace » était une cinquième époque. La
   frise porte maintenant ses dates et reste sur le papier ; le bilan descend
   dans un panneau à lui, avec son propre titre. */
.frise-titre{margin-top:clamp(34px,4vw,54px)}
.siecles{margin-top:clamp(24px,2.8vw,34px)}
.siecle-date{
  display:block;font-family:var(--serif);font-style:normal;
  font-size:12.5px;letter-spacing:.14em;color:var(--or-texte);
  margin-bottom:9px;
}
.siecles li.ici .siecle-date{color:var(--rouge)}

.bilan{
  margin-top:clamp(44px,5vw,72px);
  background:var(--carte);
  border:1px solid var(--bord-clair);border-radius:var(--rayon-large);
  padding:clamp(26px,3vw,42px) clamp(20px,2.6vw,38px) clamp(30px,3.2vw,44px);
}
.bilan-surtitre{
  text-align:center;font-family:var(--serif);font-size:12.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--or-texte);
}
.bilan-titre{
  margin-top:10px;text-align:center;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(21px,2.5vw,29px);line-height:1.22;color:var(--navy-titre);
}
.bilan-titre .point{color:var(--rouge)}
.bilan .symptomes{margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--bord-clair)}

@media (max-width:900px){
  .siecles{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .siecles li::after{display:none}
  .bilan .symptomes{grid-template-columns:minmax(0,1fr)}
  .bilan .symptomes li{border-left:0;border-top:1px solid var(--bord-clair)}
  .bilan .symptomes li:first-child{border-top:0}
}

/* ═══════════ La relecture du 7 septembre ═══════════
   Plus aucune fenêtre ne s'ouvre : partout où il y avait un cadre de navigateur
   avec un site dedans, il y a maintenant une planche — une image posée sur le
   papier, avec sa légende. */

.mention-elargie{
  max-width:64ch;margin:clamp(26px,3vw,40px) auto 0;text-align:center;
  font-size:13px;line-height:1.6;color:var(--texte-doux);
}

/* ── Les planches de démonstration ── */
.demo-titre{margin-top:clamp(40px,4.6vw,64px)}
.planche{
  display:block;                 /* une règle générique passait les figures en grille */
  margin:clamp(22px,2.6vw,34px) auto 0;
  width:min(1180px,100%);
}
.planche > img,.planche-video{
  display:block;width:100%;height:auto;max-width:100%;
  border-radius:var(--rayon-large);
  border:1px solid var(--bord-clair);
  box-shadow:0 22px 54px -30px rgba(15,46,82,.34);
  background:var(--carte);
}
.planche figcaption{
  margin-top:12px;text-align:center;
  font-size:12.5px;line-height:1.55;color:var(--texte-doux);
}
.planche-sombre > img{border-color:rgba(246,239,227,.16);box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}

/* la carte 3D se regarde, elle ne se pilote pas : un film, et ce qu'il montre */
.planche-film{position:relative}
.planche-legende{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);margin-top:clamp(16px,1.8vw,24px);
  counter-reset:etape;
}
.planche-legende li{
  position:relative;padding-top:26px;
  font-size:13px;line-height:1.5;color:#c8c0b2;
}
.planche-legende li::before{
  counter-increment:etape;content:counter(etape);
  position:absolute;top:0;left:0;
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--serif);font-size:11.5px;
  color:var(--papier);background:var(--or);
}

/* ── FranceConnect, en vrai ── */
.note-connexion{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.marque-fc{height:52px;width:auto;flex:none}
.note-connexion-sombre{
  justify-content:center;text-align:left;
  max-width:760px;margin:clamp(30px,3.4vw,44px) auto 0;
}

/* ── Le téléphone et les deux magasins, sous lui ── */
.telephone{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.telephone-ecran{
  display:block;width:min(268px,68vw);height:auto;
  border-radius:30px;border:1px solid rgba(246,239,227,.18);
  box-shadow:0 30px 64px -28px rgba(0,0,0,.7);
}
.magasins-jetons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.magasins-jetons img{height:44px;width:auto;display:block}

/* ── V · le portail de la mairie ── */
.gestes-mairie{margin-top:clamp(22px,2.6vw,32px)}

/* ── VII · le jumeau ── */
.pourquoi-jumeau{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,32px);margin-top:clamp(34px,4vw,52px);
}
.pourquoi-jumeau li{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.pourquoi-jumeau .ic{width:34px;height:34px;color:var(--or);stroke-width:1.5}
.pourquoi-jumeau b{font-family:var(--serif);font-size:16.5px;font-weight:600;color:#f6efe3;line-height:1.3}
.pourquoi-jumeau span{font-size:13.5px;line-height:1.6;color:#b6ae9f;max-width:32ch}

.sous-section{margin-top:clamp(46px,5.2vw,76px);text-align:center}
.sous-titre{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(20px,2.2vw,26px);line-height:1.25;color:var(--navy-titre);
}
.sombre .sous-titre{color:#f6efe3}
.sous-titre .point{color:var(--rouge)}
.sombre .sous-titre .point{color:var(--or)}
.sous-chapeau{
  max-width:70ch;margin:10px auto 0;
  font-size:15px;line-height:1.7;color:var(--texte-doux);
}
.sombre .sous-chapeau{color:#b6ae9f}

.urba-duo{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);margin-top:clamp(24px,2.8vw,36px);text-align:left;
}
.urba-duo li{
  padding:clamp(20px,2.2vw,28px);
  background:rgba(246,239,227,.05);
  border:1px solid rgba(246,239,227,.14);border-radius:var(--rayon-large);
}
.urba-qui{
  font-family:var(--serif);font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--or);margin-bottom:8px;
}
.urba-duo b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:#f6efe3;margin-bottom:8px}
.urba-duo span{display:block;font-size:14px;line-height:1.65;color:#b6ae9f}
.urba-note{margin-top:16px;font-size:12.5px;color:#9a9384}

/* ── IX · l'économie, à la place du tableau ── */
.economie{
  max-width:640px;margin:clamp(32px,3.6vw,48px) auto 0;
  text-align:center;font-family:var(--serif);
  font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--navy-titre);
}
.economie b{color:var(--rouge)}

/* ── X · cinq étapes au lieu de quatre ── */
.frise-cinq{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ── XI · la philosophie, avant la liste ── */
.credo{
  max-width:820px;margin:clamp(30px,3.4vw,46px) auto 0;
  display:grid;gap:16px;
}
.credo p{font-size:15px;line-height:1.75;color:#c8c0b2}
.credo b{color:#f6efe3;font-weight:600}

.duo-aparte-seul{max-width:640px}
.wa-icone{width:20px;height:20px;flex:none}
.pied-contact a{word-break:break-all}

@media (max-width:900px){
  .planche-legende{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pourquoi-jumeau,.urba-duo{grid-template-columns:minmax(0,1fr)}
  .frise-cinq{grid-template-columns:repeat(2,1fr)}
  .note-connexion{justify-content:center;text-align:center}
}

/* ═══════════ Les pages simples : blog, légal ═══════════ */
.page-simple{background:var(--papier)}
.entete-simple{position:static;border-bottom:1px solid var(--bord-clair);padding-block:14px}
.entete-simple .entete-corps{justify-content:flex-start}
.page-corps{max-width:820px;padding-block:clamp(40px,5vw,72px) clamp(50px,6vw,90px)}
.titre-page{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(28px,4vw,44px);line-height:1.14;color:var(--navy-titre);
  margin-top:10px;
}
.titre-page .point{color:var(--rouge)}
.page-chapeau{
  margin-top:clamp(16px,1.8vw,24px);
  font-size:16px;line-height:1.75;color:var(--texte-doux);
}
.page-corps h2{
  margin-top:clamp(32px,3.6vw,48px);
  font-family:var(--serif);font-weight:600;font-size:clamp(18px,2vw,22px);
  color:var(--navy-titre);line-height:1.3;
}
.page-corps p{margin-top:12px;font-size:15px;line-height:1.75;color:var(--texte)}
.page-corps h2 + p{margin-top:10px}
.page-liste{margin-top:12px;display:grid;gap:9px;padding-left:20px;list-style:disc}
.page-liste li{font-size:15px;line-height:1.7;color:var(--texte)}
.page-liste li::marker{color:var(--or)}
.page-corps a{color:var(--navy-clair);text-decoration:underline;text-underline-offset:3px}
.page-corps a:hover{color:var(--rouge)}
.page-date{margin-top:clamp(30px,3.4vw,44px);font-size:13px;color:var(--texte-doux);font-style:italic}
.page-retour{margin-top:clamp(34px,3.8vw,50px)}
.pied-simple{padding-block:26px}
.pied-simple .pied-mention{margin:0}
.pied-simple a{color:inherit}

/* ── IV · l'ordinateur et le téléphone, corrigés ──
   L'ancienne mise en page attendait un cadre de navigateur et une maquette de
   téléphone en HTML. Ce sont maintenant deux images : la planche occupe la
   colonne, le téléphone se pose dessus, et les deux magasins tiennent sur une
   ligne sous lui. */
.citoyen-ecrans{display:block;position:relative;padding-bottom:clamp(56px,6vw,84px)}
.citoyen-ecrans .planche{width:100%;margin:0}
.citoyen-ecrans .planche > img{width:100%}
.telephone{
  position:absolute;right:-10px;bottom:0;z-index:2;
  width:clamp(160px,17vw,214px);gap:12px;
}
.telephone-ecran{width:100%}
.magasins-jetons img{height:32px}
.marque-fc{height:58px}
.note-connexion{align-items:center}

@media (max-width:1000px){
  .citoyen-ecrans{padding-bottom:0;display:flex;flex-direction:column;align-items:center;gap:26px}
  .telephone{position:static;width:min(230px,62vw)}
}

/* Le bilan ne porte plus que deux constats : la grille les répartit en deux. */
.bilan .symptomes{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ═══════════ III · Pourquoi nous remplaçons le site ═══════════
   Trois raisons, chacune sur sa ligne : le picto tient la colonne de gauche,
   le constat porte au-dessus, l'explication dessous. Sans ce bloc, le HTML
   coulait en un seul pavé — c'était le cas jusqu'au 7 septembre. */
.encart-large{max-width:960px}
.encart-alerte{border-color:#e3d3cf;background:linear-gradient(180deg,#fdf7f4,var(--carte) 42%)}
.encart-alerte .encart-surtitre{color:var(--rouge);border-bottom-color:#eddcd8}

.raisons{display:grid;gap:0}
.raisons li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(14px,1.8vw,22px);row-gap:6px;
  padding:clamp(18px,2.1vw,26px) 0;
  border-top:1px solid var(--bord-clair);
}
.raisons li:first-child{border-top:0;padding-top:4px}
.raisons li:last-child{padding-bottom:4px}
.raisons .ic{
  grid-row:1/3;width:30px;height:30px;margin-top:2px;
  color:var(--rouge);stroke-width:1.5;
}
.raisons b{
  font-family:var(--serif);font-size:clamp(16px,1.8vw,18.5px);font-weight:600;
  color:var(--navy-titre);line-height:1.3;
}
.raisons span{font-size:14.5px;line-height:1.7;color:var(--texte-doux);max-width:62ch}

@media (max-width:700px){
  .raisons li{grid-template-columns:minmax(0,1fr)}
  .raisons .ic{grid-row:auto}
}

/* ═══════════ Passe de design du 7 septembre au soir ═══════════
   Moins de mots, une image par idée, et de l'air. Les planches ne prennent
   plus tout l'écran ; les écrans vivants (le plan, le cimetière) sont posés en
   pleine largeur sans cadre de navigateur ; le téléphone est à l'échelle d'un
   téléphone. */

/* ── Les planches : 16/9, jamais plus haut que deux tiers d'écran ── */
.planche{width:min(1040px,100%)}
.planche > img{max-height:min(64vh,585px);object-fit:cover;object-position:top}
.planche figcaption{margin-top:10px}

/* ── IV · l'ordinateur et le téléphone, à leurs échelles ── */
.citoyen-ecrans{padding-bottom:clamp(30px,3.4vw,48px)}
.telephone{width:clamp(130px,12.5vw,168px);right:-6px;bottom:-4px;gap:10px}
.magasins-jetons img{height:28px}

/* ── FranceConnect : le bouton, pas la vignette ── */
.fc{
  margin-top:clamp(20px,2.2vw,30px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
}
.fc-bouton{
  display:inline-flex;align-items:center;gap:12px;
  padding:9px 18px 9px 12px;border-radius:10px;
  background:#fff;color:#000091;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.55);
  font-size:12.5px;line-height:1.2;
}
.fc-bouton img{height:40px;width:auto;display:block}
.fc-bouton b{font-size:14.5px;font-weight:700;color:#000091}
.fc p{font-size:13.5px;line-height:1.6;color:#b6ae9f;max-width:36ch}

/* ── V · deux côtés, un lien ── */
.deux-cotes{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(12px,1.8vw,28px);align-items:center;
  margin-top:clamp(34px,4vw,54px);
}
.cote{margin:0}
.cote-nom{
  display:flex;align-items:center;gap:8px;
  font-family:var(--serif);font-size:14.5px;font-weight:600;color:var(--navy-titre);
  margin-bottom:12px;
}
.cote-nom .ic{width:20px;height:20px;color:var(--or);stroke-width:1.6}
.cote img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;
  border-radius:var(--rayon-large);border:1px solid var(--bord-clair);
  box-shadow:0 18px 44px -28px rgba(15,46,82,.4);
}
.cote figcaption{margin-top:10px;font-size:13px;color:var(--texte-doux);text-align:center}
.cote-lien{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--or)}
.cote-lien i{display:block;width:1px;height:clamp(28px,4vw,54px);background:var(--or);opacity:.55}
.cote-lien svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5}
.gestes-mairie{margin-top:clamp(36px,4.2vw,56px)}

/* ── VII · le plan vif, pleine largeur ── */
.plan-large{
  margin:clamp(34px,4vw,54px) 0 clamp(44px,5vw,72px);
  background:#0a2038;
}
.plan-chrome{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  width:min(1440px,100%);margin:0 auto;padding:12px clamp(16px,3vw,36px);
  font-size:12.5px;color:#b6ae9f;
}
.plan-chrome b{font-family:var(--serif);font-weight:600;color:#f6efe3;font-size:13.5px}
.plan-vif{
  display:block;width:100%;height:clamp(420px,66vh,720px);border:0;
  background:#0a2038;
}
.plan-cadre{position:relative}
.plan-cimetiere{height:clamp(320px,44vh,480px);border-radius:var(--rayon-large);overflow:hidden}
.plan-legende{margin-top:10px;font-size:12.5px;color:#9a9384;text-align:center}

/* ── VII · les trois usages : texte d'un côté, image de l'autre ── */
.usage{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  margin-top:clamp(48px,5.6vw,84px);
}
.usage-inverse .usage-texte{order:2}
.usage-texte{text-align:left}
.usage-texte .sous-titre{text-align:left}
.usage-texte p{margin-top:12px;font-size:15.5px;line-height:1.7;color:#c8c0b2;max-width:44ch}
.usage-duo{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.usage-duo li{
  font-size:13px;color:#b6ae9f;
  padding:9px 13px;border-radius:999px;
  background:rgba(246,239,227,.06);border:1px solid rgba(246,239,227,.16);
}
.usage-duo b{display:block;font-family:var(--serif);font-size:12px;letter-spacing:.06em;color:var(--or);margin-bottom:2px}
.usage-visuel{margin:0}
.usage-visuel > img{
  display:block;width:100%;height:auto;
  border-radius:var(--rayon-large);border:1px solid rgba(246,239,227,.14);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.65);
}
.usage-telephone{display:flex;justify-content:center}
.usage-telephone img{width:min(270px,62vw);border-radius:32px}

/* ── XIII · les fondateurs, en deux cartes ── */
.equipe{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,36px);width:min(1000px,100%);
  margin:clamp(30px,3.4vw,46px) auto 0;
}
.fondateur-carte{
  background:#fff;border:1px solid var(--bord-clair);border-radius:22px;overflow:hidden;
  box-shadow:0 26px 60px -36px rgba(15,46,82,.35);
}
.fondateur-carte figure{position:relative;margin:0;aspect-ratio:1/1.02;overflow:hidden;isolation:isolate}
.fondateur-carte img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:normal;
  -webkit-mask-image:none;mask-image:none}
.fondateur-carte blockquote{
  position:absolute;left:18px;bottom:18px;right:18px;z-index:2;margin:0;
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.5vw,19px);line-height:1.35;
  color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.fondateur-carte figure::after{
  content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:1;
  background:linear-gradient(to top,rgba(10,26,46,.72),transparent);
}
.fondateur-corps{padding:18px 22px 22px}
.fondateur-corps h3{font-family:var(--serif);font-size:clamp(19px,2vw,23px);font-weight:600;color:var(--navy-titre)}
.fondateur-corps .role{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or-texte);margin-top:5px;padding-bottom:12px;position:relative}
.fondateur-corps .role::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--or)}
.lien-linkedin{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-size:13.5px;font-weight:600;color:var(--navy-clair);text-decoration:underline;text-underline-offset:3px;
}
.lien-linkedin svg{width:22px;height:22px;padding:3px;border-radius:5px;background:#0a66c2;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round}
.lien-linkedin:hover{color:var(--rouge)}

@media (max-width:900px){
  .deux-cotes{grid-template-columns:minmax(0,1fr)}
  .cote-lien{flex-direction:row}
  .cote-lien i{width:clamp(28px,8vw,54px);height:1px}
  .usage,.usage-inverse{grid-template-columns:minmax(0,1fr)}
  .usage-inverse .usage-texte{order:0}
  .equipe{grid-template-columns:minmax(0,1fr)}
  .fc{grid-template-columns:minmax(0,1fr)}
}

/* le cadre du cimetière vit sur la section sombre : pas de fond papier sous lui */
.plan-cadre{background:none}
.plan-cimetiere{background:#0a2038;box-shadow:0 26px 60px -30px rgba(0,0,0,.65);border:1px solid rgba(246,239,227,.14)}
/* six gestes, trois par ligne : plus de case vide */
.gestes-mairie{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.gestes-mairie{grid-template-columns:minmax(0,1fr)}}
.sombre .fc-bouton,.sombre .fc-bouton span,.sombre .fc-bouton b{color:#000091}
.magasins-jetons{flex-direction:column;gap:8px}

/* ── VIII · l'offre : quatre lignes, pas quatre panneaux ──
   Une ligne d'information par point : le picto tient la marge, le titre et sa
   phrase se suivent. Quatre points tiennent sur une rangée, sans cadre. */
.offre-points{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,30px);margin-top:clamp(22px,2.6vw,34px);
}
.offre-points li{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:3px;
  align-items:start;text-align:left;
  padding:0;background:none;border:0;box-shadow:none;border-radius:0;
}
.offre-points .ic{grid-row:1/3;width:24px;height:24px;margin-top:2px;color:var(--or);stroke-width:1.6}
.offre-points b{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--navy-titre);line-height:1.3}
.offre-points span{font-size:13px;line-height:1.55;color:var(--texte-doux)}
@media (max-width:900px){.offre-points{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── V · l'écran et ce qu'on y fait, côte à côte comme l'espace citoyen ── */
.mairie-duo{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(48px,5.4vw,80px);
}
.mairie-gestes-titre{
  font-family:var(--serif);font-size:clamp(19px,2vw,23px);font-weight:600;
  color:var(--navy-titre);line-height:1.25;
}
.liste-gestes{display:grid;gap:14px;margin-top:20px}
.liste-gestes li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start}
.liste-gestes .ic{grid-row:1/3;width:22px;height:22px;margin-top:2px;color:var(--or);stroke-width:1.6}
.liste-gestes b{font-size:15px;font-weight:600;color:var(--navy-titre);line-height:1.3}
.liste-gestes span{display:block;font-size:13px;line-height:1.5;color:var(--texte-doux)}
.mairie-ecran{margin:0}
.mairie-ecran img{
  display:block;width:100%;height:auto;
  border-radius:var(--rayon-large);border:1px solid var(--bord-clair);
  box-shadow:0 26px 60px -32px rgba(15,46,82,.42);
}
.mairie-ecran figcaption{margin-top:10px;text-align:center;font-size:12.5px;color:var(--texte-doux)}
@media (max-width:900px){.mairie-duo{grid-template-columns:minmax(0,1fr)}}

/* ── IV · l'ordinateur et le téléphone côte à côte, plus l'un sur l'autre ── */
.citoyen-ecrans{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,1.8vw,26px);align-items:end;padding-bottom:0}
.citoyen-ecrans .planche{width:100%}
.telephone{position:static;width:clamp(118px,10.5vw,150px)}
.magasins-jetons{flex-direction:row;gap:8px;flex-wrap:wrap;justify-content:center}
.magasins-jetons img{height:26px}
@media (max-width:1000px){.citoyen-ecrans{grid-template-columns:minmax(0,1fr)}.telephone{width:min(230px,62vw);justify-self:center}}

/* ── Le haut de page, avant le film : surtitre, titre, promesse, un bouton ── */
.hero-surtitre{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or-texte);margin-bottom:clamp(14px,1.6vw,20px);
}
.hero-titre{font-size:clamp(32px,4.2vw,58px);line-height:1.1}
.hero-titre .ligne:first-child .mot{color:var(--navy-titre)}
.hero-chapeau{max-width:58ch;margin-top:clamp(16px,1.8vw,24px)}
.hero-action{display:inline-flex;margin-top:clamp(20px,2.4vw,30px)}
.hero-invite-video{
  margin-top:clamp(26px,3vw,40px);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);
}
.hero-invite-video::after{
  content:"";display:block;width:1px;height:26px;margin:10px auto 0;background:var(--or);opacity:.7;
}

/* ── Le haut de page, d'après la maquette du 7 septembre ── */
.hero-surtitre{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:clamp(14px,1.6vw,20px)}
.hero-surtitre::before,.hero-surtitre::after{content:"";width:clamp(40px,6vw,90px);height:1px;background:var(--or);opacity:.7}
.hero-piliers{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);
  width:min(1000px,100%);margin:clamp(26px,3vw,40px) auto 0;
}
.hero-piliers li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pilier-rond{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:#f3e8d6;border:1px solid #ead9bd;
}
.pilier-rond .ic{width:28px;height:28px;color:var(--or-texte);stroke-width:1.5}
.hero-piliers b{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--navy-titre)}
.hero-action.bouton-whatsapp{margin-top:clamp(24px,2.8vw,36px);font-size:15px;padding-block:12px}
@media (max-width:900px){.hero-piliers{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Contact : pour qui n'a pas WhatsApp ── */
.contact{padding-block:clamp(56px,7vw,100px)}
.contact-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.contact .chapeau{margin-top:14px;max-width:40ch}
.contact-cartes{display:grid;gap:14px}
.contact-carte{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:3px;align-items:center;
  padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,26px);
  background:var(--carte);border:1px solid var(--bord-clair);border-radius:var(--rayon-large);
  text-decoration:none;color:inherit;transition:transform .3s var(--sortie),box-shadow .3s ease;
}
.contact-carte:hover{transform:translateY(-3px);box-shadow:var(--ombre-levee,0 18px 40px -26px rgba(15,46,82,.4))}
.contact-carte .ic{grid-row:1/3;width:30px;height:30px;color:var(--or-texte);stroke-width:1.5}
.contact-carte b{font-family:var(--serif);font-size:clamp(16px,1.6vw,19px);font-weight:600;color:var(--navy-titre);word-break:break-all}
.contact-carte span{font-size:13.5px;color:var(--texte-doux)}
@media (max-width:900px){.contact-grille{grid-template-columns:minmax(0,1fr)}}
/* le titre est une phrase entière : un cran plus petit, deux lignes */
.hero-titre{font-size:clamp(26px,3.3vw,46px);line-height:1.15;letter-spacing:-.012em}

/* ═══════════ Les mockups en grand ═══════════
   Un écran se regarde à sa taille. Les planches sortent du conteneur de texte
   (jusqu'à 1 400 px), gardent leur 16/9 entier, et prennent un cadre de
   navigateur : trois points, une adresse, puis l'écran. */
.planche{
  width:min(1400px,94vw);margin-left:calc(50% - min(700px,47vw));
  background:#fff;border:1px solid var(--bord-clair);border-radius:16px;
  padding:0;overflow:hidden;
  box-shadow:0 34px 80px -40px rgba(15,46,82,.45);
}
.planche::before{
  content:"";display:block;height:38px;
  background:linear-gradient(#f8f4ec,#f1ebe0);border-bottom:1px solid var(--bord-clair);
  background-image:radial-gradient(circle at 20px 19px,#e0b4ad 5px,transparent 6px),radial-gradient(circle at 40px 19px,#e6cf9a 5px,transparent 6px),radial-gradient(circle at 60px 19px,#b7d3b3 5px,transparent 6px),linear-gradient(#f8f4ec,#f1ebe0);
}
.planche::after{
  content:attr(data-url);position:absolute;top:9px;left:50%;transform:translateX(-50%);
  min-width:260px;padding:4px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--bord-clair);
  font-size:11.5px;color:var(--texte-doux);text-align:center;
}
.planche{position:relative}
.planche > img{max-height:none;object-fit:fill;border:0;border-radius:0;box-shadow:none}
.planche figcaption{padding:10px 16px 14px;margin:0;border-top:1px solid var(--bord-clair);background:var(--carte)}
.sombre .planche{border-color:rgba(246,239,227,.14);box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.sombre .planche figcaption{background:#0f2a45;color:#b6ae9f;border-color:rgba(246,239,227,.1)}

/* IV et V : le texte serré à gauche, l'écran large à droite, hors du conteneur */
.citoyen-grille,.mairie-duo{
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  width:min(1400px,94vw);margin-left:calc(50% - min(700px,47vw));gap:clamp(28px,3.4vw,56px);
}
.mairie-ecran img,.citoyen-ecrans .planche{border-radius:16px}
.citoyen-ecrans{grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,2vw,30px)}
.citoyen-ecrans .planche{width:100%;margin:0;box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.telephone{width:clamp(150px,13vw,190px)}
/* le film et le plan vif restent tels quels */
.planche-film{background:none;border:0;box-shadow:none;padding:0}
.planche-film::before,.planche-film::after{display:none}
@media (max-width:900px){
  .planche,.citoyen-grille,.mairie-duo{width:100%;margin-left:0}
  .citoyen-grille,.mairie-duo{grid-template-columns:minmax(0,1fr)}
}
.mairie-duo .planche{width:100%;margin:0}
.mairie-duo .planche > img{border-radius:0;box-shadow:none;border:0}
.plan-image{display:block;width:100%;height:auto}
/* l'adresse mail ne se coupe plus au milieu d'un mot : la colonne s'élargit, la casse suit les points */
.pied-contact a{word-break:normal;overflow-wrap:anywhere;font-size:13px}
.pied-grille{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.8fr)) minmax(0,1.1fr)}

/* ═══════════ Le haut de page : trois écrans, pas un film ═══════════
   Un portable avec le site de la commune, un grand écran avec l'espace
   administration, un téléphone avec l'application. Ils se chevauchent comme
   sur la maquette : le grand écran au centre, les deux autres devant lui. */
.hero{overflow:visible;contain:none}
.hero-ecrans{
  position:relative;width:min(1400px,96vw);margin:clamp(30px,3.6vw,54px) auto 0;
  height:clamp(300px,36vw,560px);
}
.appareil{position:absolute;margin:0}
.appareil-ecran{
  overflow:hidden;background:#0d1b2a;
  box-shadow:0 40px 90px -36px rgba(15,46,82,.55);
}
.appareil-ecran img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* le grand écran, au centre, derrière */
.bureau{left:22%;right:22%;top:0;z-index:1}
.bureau .appareil-ecran{aspect-ratio:16/9;border-radius:14px;border:10px solid #0d1b2a;box-sizing:border-box}
.appareil-pied{display:block;width:26%;height:14px;margin:0 auto;background:linear-gradient(#1a2a3d,#0d1b2a);border-radius:0 0 8px 8px}
/* le portable, devant à gauche */
.portable{left:0;width:44%;bottom:0;z-index:2}
.portable .appareil-ecran{aspect-ratio:16/10;border-radius:12px 12px 4px 4px;border:9px solid #1c2532;border-bottom-width:12px;box-sizing:border-box}
.appareil-socle{display:block;height:14px;margin:0 -4%;background:linear-gradient(#2a3546,#141c28);border-radius:0 0 14px 14px}
/* le téléphone, devant à droite */
.telephone-hero{right:2%;width:15%;bottom:-2%;z-index:3}
.telephone-hero .appareil-ecran{aspect-ratio:9/19.5;border-radius:11% / 5%;border:7px solid #1c2532;box-sizing:border-box}
.telephone-hero .appareil-ecran img{object-position:top}
@media (max-width:900px){
  .hero-ecrans{height:auto;display:grid;gap:18px}
  .appareil{position:static;width:100%}
  .telephone-hero{width:min(220px,60vw);margin:0 auto}
}

/* ── Le haut de page, au mot près de la maquette ── */
.hero-corps{position:relative}
.hero-titre{font-size:clamp(28px,3.6vw,52px);line-height:1.12}
.hero-chapeau{max-width:66ch;font-size:clamp(15px,1.3vw,18px)}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,30px)}
.hero-actions .bouton{font-size:15px;padding:13px 24px}
.hero-actions .lien-fleche{font-size:15px;font-weight:600;color:var(--navy-titre)}
.hero-cartes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);
  width:min(1300px,100%);margin:clamp(28px,3.2vw,44px) auto 0;text-align:left;
}
.hero-cartes li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:18px 18px 18px 16px;border-radius:16px;
}
.hc-bleu{background:#e8eef7}.hc-or{background:#f7ebd9}.hc-vert{background:#e6efe6}
.hc-ic{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;background:#fff}
.hc-ic .ic{width:28px;height:28px;color:var(--navy-titre);stroke-width:1.5}
.hc-or .hc-ic .ic{color:var(--or-texte)}.hc-vert .hc-ic .ic{color:#3d6b45}
.hero-cartes b{display:block;font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);font-weight:600;color:var(--navy-titre)}
.hero-cartes span{display:block;font-size:13.5px;line-height:1.5;color:var(--texte-doux);margin-top:3px}
.hc-fleche{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;color:var(--navy-titre);font-size:16px}
.hero-note{
  position:absolute;font-family:'Caveat',cursive;font-size:clamp(20px,1.9vw,27px);line-height:1.15;color:var(--or-texte);
  width:200px;
}
.hero-note::after{content:"";display:block;width:130px;height:2px;background:var(--or);margin-top:8px;border-radius:2px}
.hero-note-gauche{left:0;top:38%;transform:rotate(-8deg)}
.hero-note-droite{right:0;bottom:8%;text-align:right;transform:rotate(-7deg)}
.hero-note-droite::after{margin-left:auto}
.hero-mairie-trait{position:absolute;right:-2%;top:6%;width:min(420px,28vw);height:auto;opacity:.55;pointer-events:none;mix-blend-mode:multiply}
@media (max-width:1300px){.hero-note,.hero-mairie-trait{display:none}}
@media (max-width:900px){.hero-cartes{grid-template-columns:minmax(0,1fr)}}
.hero-note-droite{right:0;bottom:auto;top:44%}
.hero-mairie-trait{top:2%;right:0;width:min(380px,24vw);opacity:.7;z-index:0}
.hero-texte{position:relative;z-index:1}