/* ==========================================================================
   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:#aa02cb; --primary-vif:#ae00cd; --primary-dark:#8911af;
  --primary-deeper:#8c00b4; --primary-medium:#832caf; --primary-light:#b532d9;
  --primary-pastel:#d89bef; --primary-profond:#4a1963;
  /* 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:#e9d7f9;

  /* 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:#76c22b; --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}
/* Des silhouettes vues de haut, pas des boîtes aux lettres : ici la donnée
   signature est le flux de passants. Un disque (la tête) surmontant une forme
   plus large (les épaules) suffit à faire lire « foule » à cette échelle. */
.trame i{aspect-ratio:1/1.32;display:block;position:relative}
.trame i::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:56%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.16)}
.trame i::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:86%;height:52%;border-radius:44% 44% 30% 30%;background:rgba(255,255,255,.16)}
/* Passants touchés en violet clair : le vert reste réservé à l'action, sinon
   trame, puces et CTA se disputent le même signal. */
.trame i.on::before,
.trame i.on::after{background:var(--primary-pastel)}
@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)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;margin-bottom:32px}
@media(max-width:760px){.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}