/* Design entièrement porté par cette feuille externe.
   Contrainte absolue : aucune règle ici ne doit faire ajouter du HTML.
   Pas de police distante, pas d'image, pas de JS, pas de @import :
   un seul fichier, une seule requête, mise en cache sur les 112 pages.
   Le balisage ne comporte que deux classes, .meta et .classement : tout le
   reste s'accroche à des sélecteurs de type et de position, pour que la
   feuille puisse évoluer sans jamais faire retoucher une page.
   Repères visuels pris sur lafabriquedunet.fr : blanc franc, rails
   verticaux fins, accent corail, cartes bordées qui se soulignent de noir. */

:root{
  --ink:#111214;      /* texte */
  --mut:#6b7280;      /* texte secondaire */
  --b:#e5e5e7;        /* filets et bordures de cartes */
  --a:#c93a15;        /* corail lisible, contraste 5,1:1 sur blanc — mesuré, ne pas dériver */
  --ab:#ff5c39;       /* corail vif, décoratif uniquement */
  --soft:#f7f7f8;     /* fonds légers */
  --warm:#fff4f1;     /* fond d'encadré */
  --line:#ffd9cf;     /* filet corail clair */
  --deep:#1a1c20;     /* fond du pied de page */
  --ombre:0 1px 2px rgba(17,18,20,.04), 0 8px 24px -12px rgba(17,18,20,.18);
}

*{box-sizing:border-box}
/* overflow-x:clip et non hidden : hidden sur html ou body casse le
   position:sticky de la barre de navigation, clip ne le casse pas. */
html{background:#fff;-webkit-text-size-adjust:100%;overflow-x:clip}

/* Largeur de colonne : 44rem moins 2×3rem de gouttière donne environ
   72 caractères par ligne à 18px. C'est la seule décision de mise en page
   qui compte vraiment ; au-delà de 80 caractères l'œil rate la ligne
   suivante et le texte devient pénible malgré une typographie correcte. */
body{
  margin:0 auto;max-width:44rem;padding:0;
  font:18px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-kerning:normal;
}
::selection{background:#ffdfd6}

/* --- en-tête, sur le modèle fourni : bandeau blanc sur toute la largeur,
   marque à gauche, entrées de menu à sa suite, bouton détaché à droite.
   L'en-tête déborde volontairement la colonne de lecture (68rem contre
   44rem) : c'est ce décalage qui donne au bandeau son assise.
   nav en color:transparent neutralise les séparateurs « · » du balisage
   sans les retirer du HTML : les liens, eux, reprennent une couleur. */
nav{
  position:sticky;top:0;z-index:2;color:transparent;
  /* pleine largeur alors que body est limité à 44rem, puis gouttière
     calculée pour ramener le contenu dans un axe de 68rem */
  width:100vw;margin-left:calc(50% - 50vw);
  padding:.85rem max(1.15rem,calc(50vw - 34rem));
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.7) blur(12px);
  backdrop-filter:saturate(1.7) blur(12px);
  display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;
  border-top:3px solid var(--ab);border-bottom:1px solid var(--b);
  font-size:.875rem;
}
nav a{
  display:inline-block;padding:.45rem .7rem;border-radius:8px;
  color:#4b5563;text-decoration:none;font-weight:500;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
nav a:hover{background:var(--warm);color:var(--a)}

/* La marque : pas d'image ni de police distante, la pastille est dessinée
   en CSS pur — un dégradé conique dans un carré arrondi. */
nav a:first-child{
  color:var(--ink);font-weight:800;letter-spacing:-.024em;font-size:1.05rem;
  margin-right:1.35rem;padding-left:0;padding-right:0;border-radius:0;
}
nav a:first-child::before{
  content:"";display:inline-block;width:1.4rem;height:1.4rem;
  margin-right:.55rem;vertical-align:-.28em;border-radius:7px;
  background:conic-gradient(from 205deg,var(--ab),#c93a15 38%,#ff9478 68%,var(--ab));
}
nav a:first-child:hover{background:none;color:var(--a)}

/* Bouton de droite. Le modèle place ici un appel à l'action plein ; notre
   dernier lien est le sélecteur de langue, qui ne doit pas capter le regard
   avant le classement : il reprend la forme du bouton, pas son remplissage. */
nav a:last-child{
  margin-left:auto;color:var(--ink);font-weight:600;
  padding:.5rem 1.05rem;border-radius:999px;
  background:#fff;border:1px solid var(--b);
  box-shadow:0 1px 2px rgba(17,18,20,.05);
}
nav a:last-child:hover{background:var(--a);border-color:var(--a);color:#fff}

/* --- colonne de contenu, tenue par deux rails --- */
main{
  display:block;padding:3rem 3rem 3.75rem;
  border-left:1px solid var(--b);border-right:1px solid var(--b);
}

/* --- titres ---
   text-wrap:balance répartit les mots sur les lignes d'un titre au lieu de
   laisser un mot seul en dernière ligne. Ignoré par les navigateurs anciens,
   donc sans risque, et sans le moindre octet de balisage. */
h1{
  font-size:2.45rem;line-height:1.1;letter-spacing:-.032em;font-weight:800;
  margin:0 0 1rem;text-wrap:balance;
}
h1::after{content:"";display:block;width:3.25rem;height:4px;border-radius:2px;background:var(--ab);margin-top:1.15rem}
h2{
  font-size:1.4rem;line-height:1.25;letter-spacing:-.018em;font-weight:800;
  margin:3.25rem 0 .9rem;padding-top:1.7rem;border-top:1px solid var(--b);
  text-wrap:balance;scroll-margin-top:5rem;
}
h2::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:2px;background:var(--ab);margin-right:.6rem;vertical-align:.1em}

/* Les h3 portent les questions de la FAQ et les intertitres des fiches.
   Ils étaient en corail : à l'écran on les prenait pour des liens. Ils
   repassent en encre, l'accent est déplacé sur un filet vertical. */
h3{
  font-size:1.075rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  margin:2.1rem 0 .4rem;padding-left:.75rem;border-left:3px solid var(--line);
  scroll-margin-top:5rem;
}

p,li{margin:.75rem 0;text-wrap:pretty}
strong{font-weight:700}

/* --- liens --- */
a{color:var(--a);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:var(--line)}
a:hover{color:var(--ink);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--ab);outline-offset:2px;border-radius:4px}

/* --- listes --- */
ol,ul{padding-left:1.3rem}
li::marker{color:var(--ab);font-weight:700}
li{padding-left:.15rem}

/* --- classement : une carte par agence ---
   Chaque li tient deux paragraphes : les faits, puis le verdict. Le second
   est détaché par un filet pour qu'on distingue au premier coup d'œil ce qui
   est relevé de ce qui est apprécié. */
ol.classement{list-style:none;padding:0;margin:1.75rem 0}
ol.classement li{
  margin:0 0 .7rem;padding:1.35rem 1.5rem;
  background:#fff;border:1px solid var(--b);border-radius:14px;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
ol.classement li:hover{border-color:var(--ink);box-shadow:var(--ombre);transform:translateY(-1px)}
/* la première carte est réellement le rang 1 : la teinter ne dit rien de faux */
ol.classement li:first-child{background:var(--warm);border-color:var(--line)}
ol.classement li:first-child:hover{border-color:var(--a)}
ol.classement li p{margin:.45rem 0}
ol.classement li p:first-child{margin-top:0;font-size:.97rem;line-height:1.6}
ol.classement li p:last-child{
  margin:.85rem 0 0;padding-top:.8rem;border-top:1px solid var(--b);
  color:var(--mut);font-size:.9rem;line-height:1.55;
}
ol.classement li:first-child p:last-child{border-top-color:var(--line)}
/* le rang et le nom sont dans un même strong : on ne peut pas les séparer
   sans toucher au HTML, donc on traite le bloc entier comme le titre. */
ol.classement li strong{
  display:inline-block;margin-bottom:.15rem;
  font-size:1.14rem;font-weight:800;letter-spacing:-.018em;
  font-variant-numeric:tabular-nums;
}
ol.classement li strong a{color:var(--ink);text-decoration:none}
ol.classement li strong a:hover{color:var(--a);text-decoration:underline;text-decoration-color:var(--line)}

/* --- tableaux ---
   tabular-nums aligne verticalement les colonnes de points : c'est la
   différence entre un tableau lu et un tableau regardé. */
table{
  border-collapse:separate;border-spacing:0;width:100%;font-size:.92rem;
  margin:1.5rem 0;border:1px solid var(--b);border-radius:14px;overflow:hidden;
  font-variant-numeric:tabular-nums;
}
th,td{text-align:left;padding:.72rem .95rem;border-bottom:1px solid var(--b);vertical-align:top}
th{background:var(--warm);font-weight:800;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--a);border-bottom-color:var(--line)}
td:last-child,th:last-child{text-align:right;white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--soft)}

/* --- encadré de contexte (date de relevé, rang, avertissements) ---
   Il porte les chiffres de cadrage du panel : filet corail à gauche pour
   l'isoler de la prose sans en faire une alerte. */
.meta{
  color:var(--mut);font-size:.875rem;line-height:1.6;
  background:var(--warm);border:1px solid var(--line);border-left:3px solid var(--ab);
  border-radius:4px 12px 12px 4px;
  padding:.9rem 1.15rem;margin:1.5rem 0;
  font-variant-numeric:tabular-nums;
}
.meta a{color:var(--a)}

/* --- pied de page ---
   Deux paragraphes dans le balisage : une phrase de contexte, puis la rangée
   de liens. Chacun reçoit un traitement distinct par :first-child/:last-child. */
footer{
  background:var(--deep);border-top:3px solid var(--ab);
  border-radius:18px 18px 0 0;margin-top:3rem;
  padding:2.2rem 2.35rem 2.5rem;
  font-size:.86rem;line-height:1.7;color:#9aa1ad;
}
footer p:first-child{
  margin:0 0 1.15rem;padding-bottom:1.15rem;max-width:40rem;
  color:#e9ebef;font-size:.93rem;
  border-bottom:1px solid #2c2f36;
}
footer p:last-child{margin:0;color:#4b5058}
footer a{
  display:inline-block;padding:.22rem .5rem;margin:.15rem 0;border-radius:6px;
  color:#c3c8d1;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
footer a:hover{background:#26292f;color:var(--ab)}

/* --- petits écrans --- */
@media (max-width:680px){
  body{font-size:16.5px;line-height:1.6}
  nav{padding:.6rem .8rem;gap:.05rem;font-size:.775rem}
  nav a{padding:.32rem .45rem}
  nav a:first-child{font-size:.95rem;margin-right:.3rem}
  nav a:first-child::before{width:1.15rem;height:1.15rem;margin-right:.4rem;vertical-align:-.22em;border-radius:6px}
  nav a:last-child{margin-left:auto;padding:.34rem .7rem}
  main{padding:1.85rem 1.15rem 2.25rem;border-left:0;border-right:0}
  footer{padding:1.6rem 1.25rem 2rem;border-radius:14px 14px 0 0;margin-top:2rem}
  h1{font-size:1.95rem;letter-spacing:-.026em}
  h1::after{margin-top:.9rem}
  h2{font-size:1.18rem;margin-top:2.4rem;padding-top:1.35rem}
  h3{font-size:1.02rem;margin-top:1.7rem;padding-left:.6rem}
  ol.classement li{padding:1.05rem 1.1rem}
  ol.classement li strong{font-size:1.06rem}
  table{font-size:.85rem}
  th,td{padding:.55rem .6rem}
}

/* --- mouvement réduit : on retire les transitions, pas les états --- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  ol.classement li:hover{transform:none}
}

/* --- impression --- */
@media print{
  body{border-top:0;max-width:none;font-size:11pt}
  nav{display:none}
  main{border:0;padding:0}
  footer{background:none;color:var(--ink);border-radius:0;padding:1rem 0 0}
  footer p:first-child,footer a{color:var(--ink)}
  a{color:var(--ink);text-decoration:none}
  h3{border-left-color:#bbb}
  ol.classement li,table,.meta{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}

/* ============================================================
   PAGE D'ACCUEIL — body.accueil
   Structure reprise du modèle fourni : hero, barre de preuves,
   problème/valeur, critères, classement, navigation par ville et par
   approche, FAQ dépliante, note éditoriale, pied de page en colonnes.
   Les 111 autres pages ne voient rien de ce bloc.
   Deux axes de largeur : 68rem pour les grilles de cartes, 46rem pour
   les sections de prose, où la longueur de ligne prime.
   ============================================================ */
body.accueil{max-width:none}
body.accueil main{padding:0;border:0}
body.accueil section{padding:4rem max(1.15rem,calc(50vw - 34rem))}
body.accueil section.methode,
body.accueil section.note{padding-left:max(1.15rem,calc(50vw - 23rem));padding-right:max(1.15rem,calc(50vw - 23rem))}

/* titres de section : centrés, sans le filet ni le carré des pages internes */
body.accueil section > h2{
  border-top:0;padding-top:0;margin:0 0 .6rem;
  font-size:2.05rem;line-height:1.15;letter-spacing:-.028em;text-align:center;
}
body.accueil section > h2::before{display:none}
body.accueil section.methode > h2,
body.accueil section.filtres h2{text-align:left}
body.accueil section.filtres h2{font-size:1.5rem;margin-bottom:.4rem}

/* surtitre */
.sur{
  text-align:center;margin:0 0 .5rem;
  font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--a);
}
body.accueil section.filtres .sur{text-align:left}

/* chapô sous les titres de section */
.chapo{
  text-align:center;max-width:34rem;margin:0 auto;
  color:var(--mut);font-size:1.02rem;line-height:1.6;
}

/* --- hero --- */
body.accueil section.hero{
  background:linear-gradient(180deg,var(--warm),#fff);
  border-bottom:1px solid var(--b);
  padding-top:4.5rem;padding-bottom:3.5rem;text-align:center;
}
body.accueil section.hero h1{
  font-size:3.1rem;line-height:1.06;letter-spacing:-.035em;
  max-width:23ch;margin:0 auto .9rem;
}
body.accueil section.hero h1::after{margin:1.2rem auto 0}
body.accueil section.hero .chapo{font-size:1.1rem;max-width:36rem}

/* boutons */
.actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.6rem 0 0}
.actions a{
  display:inline-block;padding:.8rem 1.5rem;border-radius:999px;
  font-size:.97rem;font-weight:600;text-decoration:none;
  border:1px solid transparent;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.actions a:first-child{background:var(--a);color:#fff;border-color:var(--a)}
.actions a:first-child:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.actions a:last-child{background:#fff;color:var(--ink);border-color:var(--b);box-shadow:0 1px 2px rgba(17,18,20,.05)}
.actions a:last-child:hover{border-color:var(--a);color:var(--a)}
.actions a:only-child{background:#fff;color:var(--a);border-color:var(--line)}
.actions a:only-child:hover{background:var(--a);color:#fff;border-color:var(--a)}

/* ligne de fraîcheur des données, sous les boutons */
body.accueil section.hero .meta{
  display:inline-block;text-align:left;margin:1.8rem auto 0;max-width:40rem;
  background:#fffdf3;border-color:#f6e6b8;border-left-color:#e3b341;
}

/* --- barre de preuves : quatre indicateurs --- */
body.accueil section.chiffres{padding-top:2.5rem;padding-bottom:2.5rem}
section.chiffres ul{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
section.chiffres li{
  margin:0;padding:1.35rem 1rem;text-align:center;
  border:1px solid var(--b);border-radius:14px;background:#fff;
  color:var(--mut);font-size:.88rem;line-height:1.4;
}
section.chiffres li::marker{content:""}
section.chiffres li strong{
  display:block;margin-bottom:.25rem;
  font-size:1.95rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* --- grilles de cartes (atouts, critères) --- */
body.accueil section.atouts{border-top:1px solid var(--b)}
body.accueil section.criteres{background:var(--soft);border-top:1px solid var(--b);border-bottom:1px solid var(--b)}
ul.grille{
  list-style:none;padding:0;margin:2.5rem 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;
}
section.criteres ul.grille{grid-template-columns:repeat(2,1fr)}
ul.grille li{
  margin:0;padding:1.6rem 1.7rem;
  background:#fff;border:1px solid var(--b);border-radius:16px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
ul.grille li:hover{border-color:var(--ink);box-shadow:var(--ombre)}
ul.grille li::marker{content:""}
ul.grille h3{
  margin:0 0 .5rem;padding:0;border:0;
  font-size:1.08rem;font-weight:800;letter-spacing:-.015em;
}
ul.grille p{margin:0;color:var(--mut);font-size:.94rem;line-height:1.6}

/* --- classement sur l'accueil --- */
body.accueil section.classement{border-top:1px solid var(--b)}
body.accueil section.classement ol.classement{margin-top:2.5rem}
body.accueil section.classement .actions{margin-top:2rem}

/* --- méthode : prose et tableau, axe étroit --- */
body.accueil section.methode{background:var(--soft);border-top:1px solid var(--b);border-bottom:1px solid var(--b)}
body.accueil section.methode > h2{margin-bottom:1rem}
body.accueil section.methode table{background:#fff}

/* --- navigation par ville et par approche : deux colonnes --- */
body.accueil section.filtres{
  display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;
  border-bottom:1px solid var(--b);
}
section.filtres > div > p{color:var(--mut);font-size:.94rem;max-width:26rem}
ul.puces{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.55rem}
ul.puces li{margin:0;padding:0}
ul.puces li::marker{content:""}
ul.puces a{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .9rem;border-radius:10px;
  background:#fff;border:1px solid var(--b);
  color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500;
  transition:border-color .15s ease,color .15s ease;
}
ul.puces a:hover{border-color:var(--a);color:var(--a)}
ul.puces a strong{
  font-size:.78rem;font-weight:700;color:var(--a);
  background:var(--warm);border-radius:20px;padding:.1rem .45rem;
  font-variant-numeric:tabular-nums;
}
p.fin{margin-top:1.4rem;font-size:.85rem;color:var(--mut)}

/* --- FAQ dépliante : <details> natif, aucun script --- */
body.accueil section.faq{background:var(--soft);border-bottom:1px solid var(--b)}
section.faq details{border-bottom:1px solid var(--b);max-width:46rem;margin:0 auto}
section.faq details:first-of-type{border-top:1px solid var(--b);margin-top:2.5rem}
section.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.25rem 1.15rem 0;position:relative;
}
section.faq summary::-webkit-details-marker{display:none}
section.faq summary h3{
  display:inline;margin:0;padding:0;border:0;
  font-size:1.02rem;font-weight:700;letter-spacing:-.01em;
}
/* chevron dessiné en CSS : deux bords d'un carré vide, pivotés */
section.faq summary::after{
  content:"";position:absolute;right:.5rem;top:1.45rem;
  width:.55rem;height:.55rem;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
  transform:rotate(45deg);transition:transform .2s ease;
}
section.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--a)}
section.faq summary:hover h3{color:var(--a)}
section.faq details p{margin:0 0 1.3rem;color:var(--mut);font-size:.95rem;max-width:44rem}

/* --- note éditoriale --- */
body.accueil section.note{padding-top:2.75rem;padding-bottom:3.25rem}
section.note p{
  margin:0;padding:1.2rem 1.4rem;
  background:var(--soft);border:1px solid var(--b);border-left:3px solid var(--mut);
  border-radius:4px 12px 12px 4px;
  color:var(--mut);font-size:.9rem;line-height:1.6;
}
section.note strong{color:var(--ink)}

/* --- pied de page en quatre colonnes --- */
footer.riche{
  display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:2.5rem;
  border-radius:0;margin-top:0;
  padding:3rem max(1.15rem,calc(50vw - 34rem)) 3rem;
}
footer.riche div > p:first-child{margin:0 0 .9rem;padding:0;border:0;max-width:none}
footer.riche div > p:first-child strong{
  color:#fff;font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
footer.riche div:first-child > p:first-child strong{
  font-size:1.05rem;letter-spacing:-.02em;text-transform:none;
}
footer.riche p{margin:.15rem 0;max-width:none}
footer.riche div:first-child p:last-child{
  color:#9aa1ad;font-size:.88rem;line-height:1.65;margin-top:.6rem;max-width:22rem;
}
footer.riche a{display:block;padding:.2rem 0;margin:0}
footer.riche a:hover{background:none;color:var(--ab);text-decoration:underline}

/* --- barre d'appel basse, fixée --- */
aside.barre{
  position:fixed;left:0;right:0;bottom:0;z-index:3;
  background:var(--a);color:#fff;
  padding:.7rem max(1.15rem,calc(50vw - 34rem));
  font-size:.92rem;text-align:center;
  box-shadow:0 -6px 20px -12px rgba(0,0,0,.5);
}
aside.barre p{margin:0}
aside.barre a{
  display:inline-block;margin-left:.6rem;padding:.35rem .9rem;border-radius:999px;
  background:#fff;color:var(--a);font-weight:700;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
aside.barre a:hover{background:var(--ink);color:#fff}
body.accueil{padding-bottom:3.5rem}

/* --- accueil sur petits écrans --- */
@media (max-width:900px){
  section.chiffres ul{grid-template-columns:repeat(2,1fr)}
  ul.grille,section.criteres ul.grille{grid-template-columns:1fr}
  body.accueil section.filtres{grid-template-columns:1fr;gap:2.5rem}
  footer.riche{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:680px){
  body.accueil section{padding:2.75rem 1.15rem}
  body.accueil section.hero{padding-top:3rem;padding-bottom:2.5rem}
  body.accueil section.hero h1{font-size:2.05rem;letter-spacing:-.028em}
  body.accueil section > h2{font-size:1.55rem}
  .chapo{font-size:.97rem}
  .actions a{padding:.7rem 1.15rem;font-size:.92rem}
  section.chiffres li strong{font-size:1.6rem}
  ul.grille li{padding:1.3rem 1.25rem}
  footer.riche{grid-template-columns:1fr;gap:1.75rem;padding:2.25rem 1.25rem}
  aside.barre{font-size:.82rem;padding:.6rem .8rem}
  aside.barre a{display:block;margin:.45rem auto 0;max-width:16rem}
  body.accueil{padding-bottom:5.5rem}
}

@media print{
  aside.barre{display:none}
  body.accueil{padding-bottom:0}
  body.accueil section{padding:0;background:none!important}
  section.faq details{max-width:none}
  section.faq summary::after{display:none}
}