/* ==========================================================================
   adrexo — feuille de style commune à toutes les pages.
   Charte relevée sur le site historique adrexo.fr (web.archive, 06/2023).
   Ratios de contraste calculés, pas estimés — voir charte-couleurs.css.
   ========================================================================== */
:root{
  --primary:#0b5fd1; --primary-vif:#ae00cd; --primary-dark:#8911af;
  --primary-deeper:#08479e; --primary-medium:#0b5fd1; --primary-light:#3b82f6;
  --primary-pastel:#9dc0f3; --primary-profond:#0a2a5e;
  /* Texte clair sur fond sombre : 5,28:1 au pire point du dégradé du hero,
     là où --primary-dark tombait à 1,07:1. */
  --primary-clair:#dde9fb;

  /* Le vert ne passe pas le contraste avec du blanc (2,21:1).
     --accent = fonds de bouton uniquement, avec texte noir (8,98:1).
     --accent-texte = la seule déclinaison lisible en texte sur blanc (5,93:1). */
  --accent:#f29b1d; --accent-dark:#61ab1a; --accent-texte:#456f18;
  --rose:#e7427e;

  --black:#0a0a0a; --gray-dark:#1f2937; --gray-medium:#6b7280;
  --gray-light:#e6e6e6; --gray-verylight:#f8f8f8; --white:#fff;
  --success:#15803d; --error:#b91c1c;

  --display:"Archivo",system-ui,sans-serif;
  --texte:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --max:1240px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--texte);font-size:17px;line-height:1.65;color:var(--gray-dark);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary-dark)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}
section{padding-block:84px}
@media(max-width:760px){section{padding-block:56px}}

h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:700}
h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600}
h3{font-size:1.18rem;font-weight:600}
p{margin:0 0 1.1em}

.eyebrow{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--primary-dark);margin-bottom:.9em;display:block}

/* --- Boutons -------------------------------------------------------------- */
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:1.02rem;
  padding:15px 30px;border-radius:var(--r);border:0;cursor:pointer;text-decoration:none;
  text-align:center;transition:background .16s,transform .16s}
.btn-primary{background:var(--accent);color:var(--black)}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--white);color:var(--primary-dark);padding:11px 17px;border-radius:8px}

/* --- En-tête -------------------------------------------------------------- */
.top{background:var(--primary-profond);color:var(--white);position:sticky;top:0;z-index:50}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px}
/* Deux lignes plutôt qu'une : « Adrexo Distribution Prospectus » sur un seul
   niveau mangerait toute la largeur de l'en-tête. */
.logo{font-family:var(--display);font-weight:700;font-size:1.32rem;color:var(--white);
  text-decoration:none;letter-spacing:-.02em;display:inline-flex;flex-direction:column;
  line-height:1.02;padding-block:4px}
.logo span{color:var(--accent);font-family:var(--mono);font-weight:600;font-size:.6rem;
  letter-spacing:.11em;text-transform:uppercase;margin-top:3px}
.top-right{display:flex;align-items:center;gap:22px}
.top .btn{padding:11px 21px;font-size:.94rem}
@media(max-width:520px){
  .logo{font-size:1.12rem}
  .logo span{font-size:.53rem;letter-spacing:.08em}
  .top .wrap{padding-inline:16px}
}

/* --- Hero ----------------------------------------------------------------- */
.hero{background:linear-gradient(160deg,var(--primary-profond) 0%,var(--primary-medium) 100%);
  color:var(--white);padding-block:64px 76px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero .eyebrow{color:var(--primary-clair)}
.hero h1{color:var(--white);margin-bottom:.42em}
.hero .lede{font-size:1.14rem;color:rgba(255,255,255,.9);max-width:52ch;margin-bottom:1.8em}

/* --- Signature : la trame de boîtes aux lettres --------------------------- */
/* `center` et non `baseline` : le libellé occupe deux lignes, et un alignement
   sur la ligne de base calait le chiffre sur la première seulement, le laissant
   flotter en haut du bloc. Centré, il s'aligne sur l'ensemble du texte. */
.compteur{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.compteur-nb{font-family:var(--mono);font-weight:600;font-size:clamp(2.3rem,5vw,3.2rem);
  color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.compteur-txt{font-size:1rem;color:rgba(255,255,255,.86);max-width:22ch}

.trame{display:grid;grid-template-columns:repeat(auto-fill,minmax(15px,1fr));gap:4px;
  margin-bottom:26px;max-width:520px}
.trame i{aspect-ratio:1/1.32;border-radius:2px;background:rgba(255,255,255,.16);display:block}
/* La fente horizontale : c'est elle qui fait lire « boîte aux lettres »
   plutôt que « carré décoratif ». */
.trame i::after{content:"";display:block;height:1.5px;width:56%;margin:52% auto 0;
  background:rgba(255,255,255,.3);border-radius:1px}
/* Boîtes desservies en violet clair, pas en vert : le vert reste réservé à
   l'action. Sinon trame, puces et CTA se disputent le même signal. */
.trame i.on{background:var(--primary-pastel)}
.trame i.on::after{background:rgba(74,25,99,.45)}
@media(prefers-reduced-motion:no-preference){
  .trame i{opacity:0;animation:pose .34s ease-out forwards}
  @keyframes pose{to{opacity:1}}
}

.hero-points{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:11px}
.hero-points li{padding-left:28px;position:relative;color:rgba(255,255,255,.94);font-size:1.01rem}
.hero-points li::before{content:"";position:absolute;left:0;top:.52em;width:13px;height:13px;
  background:var(--primary-pastel);border-radius:3px}

/* --- Formulaire ----------------------------------------------------------- */
.devis{background:var(--white);border-radius:20px;padding:32px;
  box-shadow:0 22px 50px rgba(74,25,99,.28);color:var(--gray-dark)}
.devis h2{font-size:1.44rem;margin-bottom:.28em}
.devis .sous{font-size:.95rem;color:var(--gray-medium);margin-bottom:1.5em}
.champ{margin-bottom:15px}
.champ label{display:block;font-size:.86rem;font-weight:600;margin-bottom:5px;color:var(--gray-dark)}
.champ .opt{font-weight:400;color:var(--gray-medium)}
.champ input,.champ select,.champ textarea{width:100%;padding:11px 13px;border:1.5px solid var(--gray-light);
  border-radius:9px;font-family:inherit;font-size:.97rem;color:var(--gray-dark);background:var(--white);
  transition:border-color .15s}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--primary);outline-offset:1px}
/* Signaler l'erreur seulement APRÈS que l'utilisateur a saisi puis quitté le
   champ. `:invalid` seul colore les champs requis en rouge dès l'ouverture de
   la page : accueillir le visiteur avec un formulaire déjà en faute est le
   meilleur moyen de le faire partir. */
.champ input:user-invalid,
.champ textarea:user-invalid{border-color:var(--error)}
.champ textarea{resize:vertical;min-height:78px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:13px}
/* Un numéro de rue tient en 3 caractères, un nom de rue non : leur donner la
   même largeur gaspille de la place et fait tronquer le second. */
.duo-numero{grid-template-columns:92px 1fr}
.duo-cp{grid-template-columns:130px 1fr}
@media(max-width:460px){
  .duo{grid-template-columns:1fr}
  /* Ces deux-là restent côte à côte même en étroit : les séparer sur trois
     lignes allongerait inutilement un formulaire déjà long. */
  .duo-numero{grid-template-columns:80px 1fr}
  .duo-cp{grid-template-columns:110px 1fr}
}

/* Intertitres du formulaire : trois groupes courts se remplissent mieux
   qu'une liste de douze champs d'affilée. */
.groupe{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primary-dark);margin:22px 0 11px;
  padding-bottom:7px;border-bottom:1.5px solid var(--gray-light)}
.groupe:first-of-type{margin-top:4px}
.devis .btn{width:100%;margin-top:6px}
.rgpd{font-size:.79rem;color:var(--gray-medium);margin:13px 0 0;line-height:1.5}
/* Champ piège : invisible pour l'humain, rempli par les robots.
   Volontairement sans display:none, que certains bots détectent. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Repousse les candidatures : « distribution prospectus emploi » et
   « flyers job étudiant » dominent les suggestions Google sur ces requêtes. */
.pas-emploi{margin-top:16px;padding:11px 13px;background:var(--gray-verylight);
  border-left:3px solid var(--primary-pastel);border-radius:0 7px 7px 0;
  font-size:.83rem;color:var(--gray-medium)}

/* --- Bandeau de données --------------------------------------------------- */
.chiffres{background:var(--gray-verylight);padding-block:40px}
.chiffres-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:820px){.chiffres-grid{grid-template-columns:repeat(2,1fr);gap:22px}}
.chiffre .v{font-family:var(--mono);font-weight:600;font-size:1.85rem;color:var(--primary-dark);
  line-height:1.1;font-variant-numeric:tabular-nums}
.chiffre .l{font-size:.87rem;color:var(--gray-medium);margin-top:3px}

/* --- Contenu -------------------------------------------------------------- */
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media(max-width:880px){.deux-col{grid-template-columns:1fr;gap:34px}}
.mesure{max-width:70ch}

.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
@media(max-width:880px){.cartes{grid-template-columns:1fr}}
.carte{border:1.5px solid var(--gray-light);border-radius:var(--r);padding:26px;background:var(--white);
  transition:border-color .18s,box-shadow .18s}
.carte:hover{border-color:var(--primary-pastel);box-shadow:0 8px 26px rgba(74,25,99,.08)}
.carte h3{color:var(--primary-dark)}
.carte p{margin-bottom:0;font-size:.97rem;color:var(--gray-medium)}
.carte .num{font-family:var(--mono);font-size:.79rem;font-weight:600;color:var(--accent-texte);
  letter-spacing:.1em;display:block;margin-bottom:10px}

.pastilles{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.pastilles li{background:var(--primary-pastel);color:var(--primary-profond);padding:8px 15px;
  border-radius:100px;font-size:.92rem;font-weight:500}

.section-alt{background:var(--gray-verylight)}

/* --- Maillage interne ----------------------------------------------------- */
.voisines{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:15px;margin-top:32px}
.voisine{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 20px;
  border:1.5px solid var(--gray-light);border-radius:var(--r);text-decoration:none;color:var(--gray-dark);
  background:var(--white);transition:border-color .16s,transform .16s}
.voisine:hover{border-color:var(--primary);transform:translateY(-2px)}
.voisine .n{font-weight:600;font-family:var(--display)}
.voisine .km{font-family:var(--mono);font-size:.8rem;color:var(--gray-medium);white-space:nowrap}

/* --- Index des communes (page d'accueil) ----------------------------------
   Groupé par région : par département, la moitié des blocs n'aurait contenu
   qu'une ou deux communes.
   -------------------------------------------------------------------------- */
.communes-index{margin-top:38px;display:grid;gap:40px}

/* Ces blocs sont des <section> imbriquées : sans cette annulation, elles
   héritent du padding-block:84px des sections de premier niveau, soit 168 px
   de vide par région — près de 3 500 px sur l'ensemble de l'index. */
.region{padding-block:0}

.region h3{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:1.08rem;color:var(--primary-profond);margin:0 0 .85em;
  padding-bottom:9px;border-bottom:2px solid var(--primary-pastel);
}
.region-nb{
  font-family:var(--mono);font-weight:500;font-size:.76rem;color:var(--gray-medium);
  letter-spacing:.04em;white-space:nowrap;flex-shrink:0;
}

/* Colonnes typographiques plutôt qu'une grille : les communes s'écoulent
   comme dans l'index d'un livre, sans cellule vide en fin de bloc. */
.communes-flux{
  list-style:none;padding:0;margin:0;
  columns:4;column-gap:26px;
}
/* Bascule à 1150 px et non 1000 : en dessous, une colonne de 4 devient trop
   étroite pour « Châlons-en-Champagne » ou « Cherbourg-en-Cotentin », qui
   passent alors sur deux lignes et décalent toute la colonne. */
@media(max-width:1150px){.communes-flux{columns:3}}
@media(max-width:820px){ .communes-flux{columns:2}}
@media(max-width:520px){ .communes-flux{columns:1}}

/* break-inside évite qu'un lien soit coupé en bas de colonne. */
.communes-flux li{break-inside:avoid;margin-bottom:1px}
.communes-flux a{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:7px 10px;text-decoration:none;color:var(--gray-dark);
  border-radius:7px;font-size:.95rem;
  transition:background .14s,color .14s;
}
.communes-flux a:hover{background:var(--primary-pastel);color:var(--primary-profond)}
.communes-flux a span{
  font-family:var(--mono);font-size:.74rem;color:var(--gray-medium);
  flex-shrink:0;font-variant-numeric:tabular-nums;
}
.communes-flux a:hover span{color:var(--primary-dark)}

/* --- FAQ ------------------------------------------------------------------ */
.faq{margin-top:32px;max-width:820px}
.faq details{border-bottom:1.5px solid var(--gray-light);padding:19px 0}
.faq summary{font-family:var(--display);font-weight:600;font-size:1.06rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--primary);font-size:1.4rem;
  line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:13px 0 0;color:var(--gray-medium);font-size:.99rem}

/* --- Rappel final --------------------------------------------------------- */
.final{background:var(--primary-profond);color:var(--white);text-align:center}
.final h2{color:var(--white)}
.final p{color:rgba(255,255,255,.88);max-width:56ch;margin-inline:auto;font-size:1.06rem}
.final-btns{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* --- Pied de page --------------------------------------------------------- */
footer{background:var(--black);color:rgba(255,255,255,.68);padding-block:48px 30px;font-size:.9rem}
footer a{color:rgba(255,255,255,.82)}
/* Quatre colonnes depuis l'ajout des guides ; la première garde plus de
   place pour la phrase de présentation. */
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:32px}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;gap:26px}}
footer h4{font-family:var(--display);color:var(--white);font-size:1rem;margin:0 0 13px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
footer ul a{display:inline-block;padding-block:9px}
.foot-bas{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:.83rem}
/* La mention fait 128 caractères : le max-width:80ch précédent la coupait
   systématiquement en deux, quelle que soit la taille de police. On lève la
   contrainte de largeur et on réduit un peu le corps pour qu'elle tienne sur
   une ligne en desktop. Pas de white-space:nowrap : sur mobile elle doit
   pouvoir revenir à la ligne plutôt que de déborder horizontalement. */
.avert{margin-top:12px;color:rgba(255,255,255,.5);font-size:.72rem;line-height:1.5}

/* --- Guides transverses (prix, autorisations, formats, délais, exemples) ---
   Pages longues et uniques : une colonne de lecture, des tableaux, des
   encadrés. La largeur de mesure est celle des pages légales.
   -------------------------------------------------------------------------- */
.hero-guide{padding-block:56px 60px}
.hero-guide .wrap{max-width:860px}
.hero-guide .lede{margin-bottom:1.4em}
.hero-guide .btn{margin-top:4px}

.guide{max-width:860px}
.guide h2{margin-top:1.9em}
.guide h3{margin-top:1.5em;color:var(--primary-dark)}
.guide h2+h3{margin-top:.6em}
.guide ul,.guide ol{padding-left:1.3em;margin:0 0 1.2em}
.guide li{margin-bottom:.4em}
.guide li strong{color:var(--gray-dark)}

/* Tableaux : défilement horizontal interne plutôt qu'un débordement de page. */
.tableau-wrap{overflow-x:auto;margin:24px 0 30px;-webkit-overflow-scrolling:touch}
.tableau{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.tableau th,.tableau td{padding:11px 13px;border-bottom:1.5px solid var(--gray-light);
  text-align:left;vertical-align:top}
.tableau th{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary-dark);background:var(--gray-verylight)}
.tableau td.nb{font-family:var(--mono);font-size:.88rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tableau tr:last-child td{border-bottom:0}

.encadre{border-left:4px solid var(--primary-pastel);background:var(--gray-verylight);
  padding:16px 20px;border-radius:0 var(--r) var(--r) 0;margin:26px 0}
.encadre p:last-child{margin-bottom:0}
.encadre.attention{border-color:var(--rose)}
.encadre .titre{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary-dark);display:block;margin-bottom:6px}

/* Cartes de renvoi vers les guides (pages villes, accueil, autres guides). */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:32px}
.guide-carte{display:flex;flex-direction:column;gap:8px;padding:22px;border:1.5px solid var(--gray-light);
  border-radius:var(--r);text-decoration:none;color:var(--gray-dark);background:var(--white);
  transition:border-color .16s,transform .16s}
.guide-carte:hover{border-color:var(--primary);transform:translateY(-2px)}
.guide-carte .t{font-family:var(--display);font-weight:600;color:var(--primary-dark);
  font-size:1.05rem;line-height:1.25}
.guide-carte .a{font-size:.9rem;color:var(--gray-medium);line-height:1.5}

/* Scénarios chiffrés : une fiche par opération type. */
.exemple{border:1.5px solid var(--gray-light);border-radius:var(--r);padding:26px;margin:26px 0;background:var(--white)}
.exemple h3{margin-top:0}
.exemple dl{display:grid;grid-template-columns:max-content 1fr;gap:7px 20px;margin:16px 0 0;font-size:.95rem}
.exemple dt{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--primary-dark);padding-top:3px}
.exemple dd{margin:0}
.exemple dd.budget{font-family:var(--mono);font-weight:600;color:var(--primary-profond)}
@media(max-width:520px){.exemple dl{grid-template-columns:1fr;gap:2px 0}.exemple dd{margin-bottom:10px}}

/* Étapes numérotées (déroulement d'une opération). */
.etapes{list-style:none;padding:0;margin:26px 0;counter-reset:etape}
.etapes li{position:relative;padding-left:58px;margin-bottom:24px;counter-increment:etape}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:0;width:40px;height:40px;
  border-radius:50%;background:var(--primary-pastel);color:var(--primary-profond);
  font-family:var(--mono);font-weight:600;display:flex;align-items:center;justify-content:center}
.etapes strong{display:block;font-family:var(--display);font-size:1.06rem;margin-bottom:3px}
.etapes .quand{font-family:var(--mono);font-size:.76rem;color:var(--accent-texte);letter-spacing:.06em;margin-left:8px}

/* --- Bloc chiffré par commune -------------------------------------------- */
.plan-commune{max-width:860px}
.plan-commune p{max-width:70ch}
.tableau.plan th[scope="row"]{background:transparent;font-family:var(--texte);font-size:.95rem;
  letter-spacing:0;text-transform:none;color:var(--gray-dark);font-weight:600;width:34%}
.tableau.plan td.nb{color:var(--primary-profond);font-weight:600}
.tableau.plan td:last-child{color:var(--gray-medium);font-size:.9rem}

/* ---- Propre au site flyers ------------------------------------------- */
.fil{font-size:.86rem;color:var(--gray-medium,#6b7280);margin-bottom:14px}
.fil a{color:inherit;text-decoration:none}
.fil a:hover{text-decoration:underline}
.maj{font-size:.86rem;color:var(--gray-medium,#6b7280);margin:-6px 0 22px}
.hero-note{margin-top:18px;font-size:.95rem;color:var(--gray-medium,#6b7280)}
.rubriques .rubrique{margin-top:40px}
.rubriques .rubrique h3{font-family:var(--display);font-size:1.3rem;margin:0 0 6px}
.rubriques .rubrique .sous{margin:0 0 16px;color:var(--gray-medium,#6b7280)}
.guide .tableau th,.guide .tableau td{vertical-align:top}
.guide .encadre{margin:26px 0}
.guide .etapes{counter-reset:etape}
.hero .fil,.hero .fil a,.hero .maj{color:rgba(255,255,255,.72)}
.hero .hero-note{color:rgba(255,255,255,.82)}
.hero .hero-note a{color:#fff;text-decoration:underline}