/* Fibre Entreprise — front public.
   Palette revue : papier gris-bleu froid, encre bleu nuit, un vert profond pour
   l'information technique et un orange brûlé réservé aux actions. */

:root {
  /* Palette revue : bleu nuit profond, turquoise franc pour l'information technique,
     ambre pour l'alerte, corail pour l'action. Assez de contraste pour que la page
     respire sans virer au tableau de bord. */
  --papier:       #F5F7F8;
  --carte:        #FFFFFF;
  --encre:        #0B1B2B;
  --encre-clair:  #16324A;
  --douce:        #5A6E7F;
  --trait:        #D8E0E5;
  --accent:       #0A7C7B;
  --accent-vif:   #12A8A0;
  --accent-clair: #E2F2F0;
  --signal:       #E0552B;
  --signal-fonce: #B94320;
  --ambre:        #B8791A;
  --ambre-clair:  #FDF3E0;
  --mesure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Un fond en pleine largeur mal calé suffit à faire apparaître une barre de défilement
   horizontale sur toutes les pages : on la coupe à la racine. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Un élément masqué par l'attribut hidden doit le rester, même si une règle plus
   spécifique lui donne un display : c'est ce qui empêchait le bandeau cookies de
   disparaître après un clic. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
  font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .6rem;
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); margin-top: 2.8rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1.05rem; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-color: var(--trait); }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.enveloppe { width: min(1220px, 100% - 3rem); margin-inline: auto; }

/* ---------- en-tête ---------- */

.bandeau-haut {
  background: #2A3945; color: #C6D2DA;
  font-size: .72rem; line-height: 1.4; letter-spacing: .01em;
}
.bandeau-haut .enveloppe {
  display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; padding: .3rem 0;
}
.bandeau-haut span { display: inline-flex; align-items: center; gap: .3rem; }
.bandeau-haut svg { width: 12px; height: 12px; color: var(--accent-vif); }
.bandeau-haut .fin { margin-left: auto; }
@media (max-width: 640px) { .bandeau-haut .fin { margin-left: 0; } }

.bandeau-haut {
  background: var(--encre); color: #E7EEF2; font-size: .82rem;
}
.bandeau-haut .enveloppe {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; padding: .45rem 0;
}
.bandeau-haut span { display: inline-flex; align-items: center; gap: .35rem; }
.bandeau-haut svg { width: 14px; height: 14px; }
.bandeau-haut .fin { margin-left: auto; }

.entete {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--trait);
}
.marque {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: 1.08rem; letter-spacing: -.03em; text-decoration: none; color: var(--encre);
  white-space: nowrap;
}
.marque .logo {
  width: 26px; height: 26px; flex: none;
  background: var(--encre); color: var(--accent-vif); border-radius: 7px; padding: 5px;
}
.marque span { color: var(--accent); }
.entete nav { margin-left: auto; display: flex; gap: .2rem; align-items: center; flex-wrap: wrap; }
.entete nav a {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  color: var(--encre); text-decoration: none; font-size: .86rem; padding: .25rem .55rem;
  border-bottom: 2px solid transparent;
}
.entete nav a:hover, .entete nav a[aria-current="page"] { border-bottom-color: var(--accent-vif); }
.entete nav a svg { width: 15px; height: 15px; color: var(--accent); }
.entete .action {
  background: var(--signal); color: #fff; padding: .4rem .8rem; border-bottom: none;
  margin-left: .5rem; font-weight: 600;
}
.entete .action:hover { background: var(--signal-fonce); border-bottom-color: transparent; }
.entete .action svg { color: #fff; }

.picto-svg { width: 18px; height: 18px; vertical-align: -3px; flex: none; }
h2 .picto-svg, h3 .picto-svg { color: var(--accent); margin-right: .4rem; }

/* ---------- héros ---------- */

.heros {
  padding: 3.4rem 0 2.5rem; position: relative;
}
.heros::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background:
    radial-gradient(60rem 22rem at 18% -10%, var(--accent-clair) 0%, transparent 65%),
    linear-gradient(180deg, #FFFFFF 0%, var(--papier) 100%);
}
.heros h1 em {
  font-style: normal; color: var(--accent);
  box-shadow: inset 0 -.32em 0 var(--accent-clair);
}
.arguments {
  display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 2rem;
  padding-top: 1.2rem; border-top: 1px solid var(--trait);
}
.arguments div { display: flex; gap: .55rem; align-items: flex-start; max-width: 30ch; }
.arguments svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: .15rem; }
.arguments strong { display: block; font-size: .95rem; }
.arguments small { color: var(--douce); font-size: .85rem; }
.heros h1 { max-width: 24ch; }
.heros .accroche { font-size: 1.14rem; color: var(--douce); }

.chercheur { position: relative; margin: 2.4rem 0 1rem; max-width: 720px; }
.chercheur input[type="text"] {
  width: 100%; padding: .6rem 0 .8rem;
  border: none; border-bottom: 2px solid var(--encre); background: transparent;
  color: var(--encre); font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.25rem, 3.2vw, 2rem); letter-spacing: -0.02em;
}
.chercheur input[type="text"]::placeholder { color: #93A3AB; }
.chercheur input[type="text"]:focus { outline: none; border-bottom-color: var(--accent); }
.chercheur .indice { font-size: .85rem; color: var(--douce); margin-top: .6rem; }

.suggestions {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  background: var(--carte); border: 1px solid var(--trait); border-top: none;
  max-height: 300px; overflow-y: auto; margin: 0; padding: 0; list-style: none;
}
.suggestions li { padding: .55rem .8rem; cursor: pointer; font-size: .95rem; }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--accent-clair); }
.suggestions li small { color: var(--douce); }

/* ---------- fiche commune ---------- */

.bandeau { padding: 2.6rem 0 1rem; border-bottom: 1px solid var(--trait); }
.fil { font-size: .87rem; color: var(--douce); margin-bottom: .8rem; }
.verdict { display: inline-flex; align-items: center; gap: .55rem; font-size: .95rem; font-weight: 600; }
.pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.verdict.partiel .pastille { background: var(--ambre); }

.fiche { width: 100%; max-width: none; border-collapse: collapse; margin: 1.4rem 0 2.2rem;
          table-layout: auto; }
.fiche th, .fiche td { word-break: break-word; }
.fiche th, .fiche td {
  text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--trait); vertical-align: baseline;
}
.fiche th { font-weight: 400; color: var(--douce); width: 40%; }
.fiche td { font-weight: 600; }
.fiche thead th { font-weight: 600; color: var(--encre); width: auto; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; }

.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; }
@media (max-width: 980px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

.encadre {
  background: var(--carte); border: 1px solid var(--trait); padding: 1.1rem 1.2rem; margin: 1.6rem 0;
}
.encadre h3 { margin-top: 0; }
.encadre p { font-size: .93rem; }
.encadre ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .93rem; }
.encadre li { margin-bottom: .3rem; }

/* ---------- picto d'aide ---------- */

.picto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: .28rem; padding: 0;
  border: 1px solid var(--accent); border-radius: 50%; background: transparent;
  color: var(--accent); font: inherit; font-size: .68rem; font-weight: 700;
  line-height: 1; cursor: help; vertical-align: text-top;
}
.picto:hover { background: var(--accent); color: #fff; }

.bulle {
  position: absolute; z-index: 60; max-width: 320px;
  background: var(--carte); border: 1px solid var(--encre); padding: .8rem .9rem;
  font-size: .88rem; line-height: 1.5; box-shadow: 0 6px 20px rgba(18, 33, 44, .12);
}
.bulle strong { display: block; margin-bottom: .25rem; }
.bulle a { display: inline-block; margin-top: .5rem; font-size: .85rem; }

/* ---------- listes de communes et recherche département ---------- */

.filtre-communes {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 1.4rem 0 .6rem;
}
.filtre-communes input {
  padding: .5rem .7rem; border: 1px solid var(--trait); background: var(--carte);
  font: inherit; font-size: .95rem; min-width: 260px;
}
.filtre-communes .compte { font-size: .88rem; color: var(--douce); }

.lettres { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.2rem; }
.lettres button {
  border: 1px solid var(--trait); background: var(--carte); color: var(--encre);
  font: inherit; font-size: .82rem; padding: .15rem .5rem; cursor: pointer;
}
.lettres button[aria-pressed="true"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }

.grille-communes { list-style: none; padding: 0; margin: 1.2rem 0 0; columns: 3 210px; column-gap: 2rem; }
.grille-communes li { padding: .28rem 0; break-inside: avoid; font-size: .95rem; }
.grille-communes small { color: var(--douce); }

.rappel {
  border-left: 3px solid var(--accent); padding: .2rem 0 .2rem 1rem; margin: 2rem 0;
  color: var(--douce); font-size: .92rem;
}
.rappel p:last-child { margin-bottom: 0; }

/* ---------- formulaire ---------- */

.formulaire {
  border: 1px solid var(--encre); padding: 1.5rem; background: var(--carte); position: sticky; top: 1.5rem;
}
.formulaire h2 { margin-top: 0; font-size: 1.3rem; }
.formulaire p { font-size: .92rem; color: var(--douce); }
.champ { margin-bottom: 1rem; }
.champ label { display: block; font-size: .85rem; color: var(--douce); margin-bottom: .25rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .55rem .6rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--trait); background: var(--papier); color: var(--encre); border-radius: 0;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--encre); outline: none; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.cases { display: flex; flex-wrap: wrap; gap: .45rem; }
.cases input { position: absolute; opacity: 0; width: 0; }
.cases label {
  border: 1px solid var(--trait); padding: .35rem .7rem; font-size: .88rem;
  cursor: pointer; background: var(--papier); margin: 0;
}
.cases input:checked + label { border-color: var(--accent); background: var(--accent); color: #fff; }
.cases input:focus-visible + label { outline: 2px solid var(--signal); outline-offset: 2px; }

button, .bouton {
  display: inline-block; border: none; background: var(--signal); color: #fff;
  font: inherit; font-weight: 600; padding: .7rem 1.4rem; cursor: pointer; text-decoration: none;
}
button:hover, .bouton:hover { background: #A9421F; }
.mention { font-size: .78rem; color: var(--douce); margin-top: .9rem; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- blog ---------- */

.actu {
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
  background: var(--accent-clair); border-left: 3px solid var(--accent);
  padding: .8rem 1rem; margin: 2rem 0;
}
.actu .etiquette { font-size: .78rem; color: var(--accent); font-weight: 600; }
.actu p { margin: 0; font-size: .95rem; }

.liste-articles { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.liste-articles li { border-bottom: 1px solid var(--trait); padding: 1rem 0; }
.liste-articles h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.liste-articles p { margin: .2rem 0 0; font-size: .94rem; color: var(--douce); }
.meta { font-size: .8rem; color: var(--douce); }

.article-corps { max-width: none; }
.article-corps h2 { font-size: 1.4rem; }
.article-corps ul { padding-left: 1.2rem; }

.onglets-cat { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1rem; }
.onglets-cat a {
  border: 1px solid var(--trait); background: var(--carte); padding: .25rem .7rem;
  font-size: .86rem; text-decoration: none; color: var(--encre);
}
.onglets-cat a[aria-current="page"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* ---------- pied de page pleine largeur ---------- */

.pied {
  margin-top: 5rem;
  background: #1A2A38;            /* gris ardoise, franchement détaché du corps de page */
  color: #C3D0D9;
  border-top: 4px solid var(--accent);
  padding: 2.6rem 0 2.2rem;
  font-size: .9rem;
  line-height: 1.65;
}
.pied .enveloppe { width: min(1400px, 100% - 3rem); }
.pied p { max-width: none; margin-bottom: .9rem; }
.pied h2 {
  color: #FFFFFF; font-size: 1.05rem; margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .5rem;
  letter-spacing: -.01em;
}
.pied h2 svg { color: var(--accent-vif); }
.pied a { color: #EAF1F4; text-decoration-color: rgba(234, 241, 244, .4); }
.pied a:hover { color: #FFFFFF; text-decoration-color: var(--accent-vif); }
.pied small { color: #8FA3B0; }
.pied .grille-communes li { padding: .35rem 0; }

.pied-legal {
  margin-top: 2rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; gap: 2rem; flex-wrap: wrap; align-items: baseline;
}
.pied-legal .copyright { color: #FFFFFF; font-weight: 600; }
.pied .liens { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 0 0 0 auto; }
.pied button.lien {
  background: none; border: none; padding: 0; font: inherit; color: #EAF1F4;
  text-decoration: underline; text-decoration-color: rgba(234, 241, 244, .4); cursor: pointer;
}
.pied button.lien:hover { color: #FFFFFF; text-decoration-color: var(--accent-vif); }
.pied .mention-source { color: #8FA3B0; font-size: .82rem; }

/* ---------- fenêtres mentions et CGU ---------- */

dialog.modale {
  border: 1px solid var(--encre); padding: 0; max-width: 720px; width: calc(100% - 2rem);
  background: var(--carte); color: var(--encre);
}
dialog.modale::backdrop { background: rgba(18, 33, 44, .45); }
.modale-entete {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--trait);
}
.modale-entete h2 { margin: 0; font-size: 1.2rem; }
.modale-entete button { margin-left: auto; background: none; color: var(--douce); padding: 0; font-size: 1.4rem; }
.modale-corps { padding: 1.2rem 1.4rem 1.6rem; max-height: 65vh; overflow-y: auto; font-size: .93rem; }
.modale-corps h3 { margin-top: 1.4rem; }

.confirmation { padding: 4rem 0; }
.confirmation .reference { font-family: "IBM Plex Mono", monospace; font-size: 1.05rem; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- partage ---------- */

.partage {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 2rem 0; padding: .8rem 0; border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
.partage-titre { font-size: .85rem; color: var(--douce); margin-right: .2rem; }
.partage-lien {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--trait);
  background: var(--carte); color: var(--encre); cursor: pointer; text-decoration: none;
}
.partage-lien:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-clair); }
.partage-lien svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
/* Les deux derniers pictos sont des traits, pas des aplats. */
.partage-lien[data-partage-email] svg, .partage-lien[data-copier] svg {
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.partage-etat { font-size: .82rem; color: var(--accent); }
.reussite { color: var(--accent); }
.erreur { color: var(--signal); }

/* ---------- widget de mesure ---------- */

.mesure {
  background: var(--carte); border: 1px solid var(--encre); padding: 1.2rem 1.3rem; margin: 2rem 0;
}
.mesure h3 { margin-top: 0; }
.mesure > p { font-size: .92rem; }
.mesure-cadre { margin: 1.1rem 0 .6rem; }
.mesure-cadre iframe { width: 100%; height: 640px; border: 1px solid var(--trait); display: block; }
@media (max-width: 620px) { .mesure-cadre iframe { height: 720px; } }


/* ---------- alerte cuivre ---------- */

.alerte-cuivre {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--ambre-clair); border: 1px solid #EBD4A6; border-left: 4px solid var(--ambre);
  padding: 1rem 1.1rem; margin: 1.8rem 0;
}
.alerte-cuivre svg { width: 26px; height: 26px; color: var(--ambre); flex: none; }
.alerte-cuivre h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: #7A4E06; }
.alerte-cuivre p { margin: 0 0 .5rem; font-size: .93rem; }
.alerte-cuivre p:last-child { margin-bottom: 0; }
.alerte-cuivre .date { font-weight: 600; }
.alerte-cuivre.calme { background: var(--accent-clair); border-color: #BFDFDB; border-left-color: var(--accent); }
.alerte-cuivre.calme svg, .alerte-cuivre.calme h3 { color: var(--accent); }

/* ---------- photo de commune ---------- */

.illustration { margin: 1.4rem 0 2rem; }
.illustration img {
  width: 100%; height: auto; max-height: 340px; object-fit: cover; display: block;
  border: 1px solid var(--trait); background: var(--carte);
}
.illustration figcaption { font-size: .76rem; color: var(--douce); margin-top: .35rem; }
.illustration figcaption a { color: var(--douce); }

/* ---------- blog ---------- */

.carte-article {
  display: grid; grid-template-columns: 200px 1fr; gap: 1.2rem; align-items: start;
}
@media (max-width: 620px) { .carte-article { grid-template-columns: 1fr; } }
.carte-article img { width: 100%; height: 130px; object-fit: cover; border: 1px solid var(--trait); }
.etiquette-cat {
  display: inline-block; background: var(--accent-clair); color: var(--accent);
  font-size: .74rem; font-weight: 600; padding: .1rem .5rem; text-transform: uppercase;
  letter-spacing: .04em;
}
.article-image { margin: 1.4rem 0; }
.article-image img { width: 100%; height: auto; border: 1px solid var(--trait); }
.article-image figcaption { font-size: .76rem; color: var(--douce); margin-top: .35rem; }
.article-corps img { max-width: 100%; height: auto; }
.article-corps iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; }
.article-corps blockquote {
  border-left: 3px solid var(--accent); margin: 1.4rem 0; padding-left: 1rem; color: var(--douce);
}

/* ---------- questions sous les articles ---------- */

.questions { margin-top: 3rem; border-top: 2px solid var(--encre); padding-top: 1.4rem; }
.questions h2 { margin-top: 0; }
.fil-question { border-bottom: 1px solid var(--trait); padding: 1rem 0; }
.fil-question .auteur { font-weight: 600; font-size: .95rem; }
.fil-question .quand { color: var(--douce); font-size: .8rem; }
.fil-question p { margin: .4rem 0 0; font-size: .95rem; }
.reponse {
  margin: .8rem 0 0 1.5rem; padding-left: 1rem; border-left: 2px solid var(--accent-clair);
}
.reponse.equipe { border-left-color: var(--accent); }
.badge-equipe {
  background: var(--accent); color: #fff; font-size: .7rem; padding: .05rem .4rem;
  margin-left: .4rem; vertical-align: 1px;
}
.formulaire-question { background: var(--carte); border: 1px solid var(--trait); padding: 1.2rem; margin-top: 1.6rem; }
.formulaire-question h3 { margin-top: 0; }

/* ---------- emplacement publicitaire ---------- */

.publicite { margin: 3rem 0 0; text-align: center; }
.publicite-etiquette {
  display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: #9AAAB4; margin-bottom: .35rem;
}
.publicite-cadre {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 970px; min-height: 90px; overflow: hidden;
  background: var(--carte); border: 1px dashed var(--trait);
}
.publicite-cadre ins, .publicite-cadre iframe { max-width: 100%; }
.publicite-refus { margin: 0; font-size: .78rem; color: #9AAAB4; padding: 0 1rem; }

/* ---------- bandeau de consentement ---------- */

.cookies {
  position: fixed; z-index: 90; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 780px; margin-inline: auto;
  background: #1A2A38; color: #E4EDF2; border-top: 3px solid var(--accent-vif);
  padding: 1rem 1.2rem; box-shadow: 0 10px 30px rgba(11, 27, 43, .3);
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
}
.cookies-texte { flex: 1 1 320px; }
.cookies-texte strong { display: block; margin-bottom: .2rem; }
.cookies-texte p { margin: 0; font-size: .86rem; line-height: 1.5; max-width: none; }
.cookies-boutons { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.cookies button { font-size: .88rem; padding: .5rem 1rem; }
.cookies button.secondaire {
  background: transparent; color: #E4EDF2; border: 1px solid rgba(228, 237, 242, .45);
}
.cookies button.secondaire:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.cookies button.lien {
  background: none; border: none; color: #E4EDF2; text-decoration: underline;
  padding: 0; cursor: pointer; font-size: .85rem;
}

/* Mention de gratuité, dans le formulaire de devis. */
.formulaire .gratuit {
  background: var(--accent-clair); border-left: 3px solid var(--accent);
  padding: .6rem .7rem; font-size: .88rem; color: var(--encre);
}

/* Encadré de recommandation, utilisé pour le guide de l'Arcep. */
.encadre-guide {
  background: var(--accent-clair); border: 1px solid #BFDFDB; border-left: 4px solid var(--accent);
  padding: 1.1rem 1.2rem; margin: 1.4rem 0;
}
.encadre-guide p:last-child { margin-bottom: 0; }
.encadre-guide .bouton { margin: .2rem 0 .6rem; }