/* ==========================================================================
   TES.Landing.Certibeau — feuille de style
   Reprise quasi telle quelle du gabarit fourni par le client, complétée par :
   - l'état ouvert du menu mobile (.menu.is-open), le burger reposait à l'origine
     sur du JS inline ; il est géré ici en CSS + wwwroot/js/site.js
   - le bandeau de consentement cookies (.cookie-banner)
   ========================================================================== */
:root{
  --blue:#0d7fc2;
  --blue-deep:#0b3a53;
  --blue-ink:#082a3d;
  --teal:#14a8a0;
  --green:#3ca35b;
  --green-soft:#e7f6ec;
  --sky:#eaf6fc;
  --sky-2:#f5fbfd;
  --sand:#ffffff;
  --text:#22323b;
  --muted:#5d7079;
  --line:#e2eef3;
  --shadow:0 18px 40px -22px rgba(11,58,83,.45);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  /* Le header est collant et mesure 67 px : sans cette marge, un lien d'ancre amene le haut de la
     section a 0 px, donc ses 67 premiers pixels sous le header (mesure par
     scripts/audit-responsive.ps1 et le banc d'ancres). Sur telephone, ou le padding de section
     tombe a 3 rem (48 px), c'est le sur-titre de la section qui disparait. 5.5 rem = 88 px laisse
     21 px d'air sous le header. */
  scroll-padding-top:5.5rem;
  /* iOS Safari grossit le texte de lui-meme au passage en paysage, ce qui casse les tailles
     fluides calculees en vw. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--sky-2);line-height:1.65;-webkit-font-smoothing:antialiased;
  /* Precaution, non correctif : aucun texte actuel ne deborde (verifie par
     scripts/audit-responsive.ps1), mais une URL collee dans un contenu suffirait a elargir tout le
     document sur un ecran de telephone, un mot insecable ne se coupant pas. */
  overflow-wrap:break-word}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.2;color:var(--blue-ink);font-weight:700}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* <picture> n'existe que pour proposer une variante WebP : il ne doit pas peser dans la mise en
   page. display:contents le retire de l'arbre des boîtes, si bien que les règles ci-dessous
   (.hero .photo img, .band .media img, .why .photo-frame img) continuent de s'appliquer comme
   quand l'image était l'enfant direct de son cadre. Sans cela, le height:100% du hero se
   résoudrait contre une boîte en ligne de hauteur automatique et la photo disparaîtrait. */
picture{display:contents}
.wrap{width:min(1160px,92%);margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:'Poppins';font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);border-radius:2px}
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:'Poppins';font-weight:600;font-size:.95rem;padding:.85rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.2s transform,.2s box-shadow,.2s background}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;box-shadow:0 12px 26px -12px rgba(13,127,194,.8)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.btn-outline{background:#fff;color:var(--blue-deep);border-color:var(--line)}

/* ---------- ACCESSIBILITÉ ---------- */
/* Une règle d'auteur comme .cookie-banner{display:flex} bat la règle [hidden] de l'agent
   utilisateur : sans ce rappel, un élément masqué en JS resterait visible. */
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--blue-ink);
  font-family:'Poppins',sans-serif;font-weight:600;padding:.8rem 1.2rem;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Pages de service (erreur, 404) : reprennent la charte sans dépendre des sections. */
.page-message{padding:6rem 0;text-align:center;min-height:60vh}
.page-message h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1rem}
.page-message p{color:var(--muted);margin-bottom:1.2rem}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.8rem}
.brand .logo-box{height:46px;display:flex;align-items:center}
.brand .logo-box img{height:46px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt strong{font-family:'Poppins';font-weight:700;font-size:1.05rem;color:var(--blue-ink)}
.brand-txt span{font-size:.72rem;color:var(--muted)}
nav.menu{display:flex;align-items:center;gap:1.6rem}
/* nowrap : sans lui, « Le CertIBEau » et « Pourquoi nous » se coupaient en deux lignes des que la
   place manquait, et le header devenait bancal bien avant de basculer sur le burger. */
/* min-height : les liens ne faisaient que 24 px de haut, soit le minimum absolu. La hauteur du
   header n'en bouge pas (le logo en impose deja 46), c'est donc une zone cliquable gagnee sans
   contrepartie visuelle. */
nav.menu a{font-size:.92rem;font-weight:500;color:var(--blue-deep);transition:.2s color;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px}
nav.menu a:hover{color:var(--teal)}
.nav .btn{padding:.6rem 1.15rem;font-size:.88rem;white-space:nowrap}
/* 44 px : la cible tactile recommandee. Le bouton ne mesurait que 24 px de large pour ~26 de haut,
   soit une zone deux fois trop petite au pouce — et c'est le seul acces au menu sur mobile. */
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;
  flex:0 0 auto;align-items:center;justify-content:center;flex-direction:column}
.burger span{display:block;width:24px;height:2px;background:var(--blue-deep);margin:3px 0;border-radius:2px}

/* ---------- HERO ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(150deg,#0b3a53,#0d7fc2 60%,#14a8a0)}
.hero .photo{position:absolute;inset:0;z-index:0}
.hero .photo img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(8,42,61,.86),rgba(13,127,194,.55) 55%,rgba(20,168,160,.5))}
.hero-inner{position:relative;z-index:2;padding:5.5rem 0 7.5rem}
.hero .eyebrow{color:#bff0ea}
.hero .eyebrow::before{background:#8fe3da}
.hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:800;max-width:16ch;margin:1rem 0}
.hero p.lead{font-size:1.16rem;max-width:52ch;color:#eaf6fc}
.hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.badge-agr{display:inline-flex;align-items:center;gap:.7rem;margin-top:2.4rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);padding:.6rem 1rem;border-radius:14px;backdrop-filter:blur(4px);font-size:.9rem}
.badge-agr b{font-family:'Poppins'}
.drop-ico{width:22px;height:22px;flex:0 0 auto}
.wave-sep{position:absolute;bottom:-1px;left:0;width:100%;z-index:3;line-height:0}

/* ---------- SECTIONS ---------- */
section{padding:5rem 0}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.7rem 0 1rem}
.sec-head p{color:var(--muted);font-size:1.05rem}
.lede{font-size:1.12rem;color:var(--text)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow);transition:.25s transform,.25s box-shadow}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 46px -24px rgba(11,58,83,.55)}
.card .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--sky);margin-bottom:1rem}
.card.g .ic{background:var(--green-soft)}
.card h3{font-size:1.16rem;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.97rem}

/* obligation band */
.band{background:linear-gradient(135deg,var(--blue-deep),#0d7fc2);color:#fff;border-radius:26px;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;box-shadow:var(--shadow)}
.band .txt{padding:3rem}
.band .txt h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem)}
.band .txt p{color:#dceff9;margin-top:.8rem;font-size:1.05rem}
.band .txt .date-pill{display:inline-block;background:var(--green);color:#fff;font-family:'Poppins';font-weight:600;padding:.35rem .9rem;border-radius:999px;font-size:.85rem;margin-bottom:1rem}
.band .media{position:relative;min-height:280px;background:linear-gradient(135deg,#14a8a0,#3ca35b)}
.band .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* verifie: two columns */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.6rem}
.check-card{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:14px;padding:1.6rem}
.check-card.green{border-left-color:var(--green)}
.check-card h3{display:flex;align-items:center;gap:.6rem;font-size:1.15rem}
.check-card ul{list-style:none;margin-top:.9rem;display:flex;flex-direction:column;gap:.55rem}
.check-card li{position:relative;padding-left:1.6rem;color:var(--muted);font-size:.97rem}
.check-card li::before{content:"";position:absolute;left:0;top:.5rem;width:9px;height:9px;border-radius:50%;background:var(--teal)}
.check-card.green li::before{background:var(--green)}

/* concernés chips */
.chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.6rem 1.1rem;font-weight:500;font-size:.95rem;color:var(--blue-deep);box-shadow:0 8px 18px -14px rgba(11,58,83,.5)}
.chip svg{color:var(--teal)}

/* steps */
.steps{margin-top:2.6rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.4rem;position:relative;box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);font-family:'Poppins';font-weight:800;font-size:1.1rem;color:#fff;background:linear-gradient(135deg,var(--blue),var(--teal));width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.step h3{font-size:1.05rem;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.93rem}

/* why us */
.why{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center}
.why .facts{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.6rem}
.fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem}
.fact b{display:block;font-family:'Poppins';font-size:1.5rem;color:var(--blue)}
.fact span{font-size:.9rem;color:var(--muted)}
.why .photo-frame{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);min-height:360px;background:linear-gradient(135deg,#0d7fc2,#3ca35b);position:relative}
.why .photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* faq */
.faq{max-width:820px;margin:2.4rem auto 0}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.3rem 1.3rem;margin-bottom:.9rem;box-shadow:0 10px 22px -20px rgba(11,58,83,.6)}
details summary{cursor:pointer;list-style:none;font-family:'Poppins';font-weight:600;color:var(--blue-ink);padding:1rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:1.4rem;color:var(--teal);transition:.2s transform}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);padding-bottom:1.1rem}

/* contact */
.contact{background:linear-gradient(160deg,#0b3a53,#0d7fc2);color:#fff}
.contact h2{color:#fff}
.contact .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.6rem;margin-top:2.4rem}
.contact .info-list{display:flex;flex-direction:column;gap:1.3rem}
.info-row{display:flex;gap:1rem;align-items:flex-start}
.info-row .ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25)}
.info-row .info-label{font-family:'Poppins',sans-serif;font-weight:700;line-height:1.2;color:#fff;font-size:1rem;margin-bottom:.15rem}
.info-row p,.info-row a{color:#d7ecf7;font-size:.98rem}
.info-row a:hover{color:#fff;text-decoration:underline}
.contact-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:2rem;backdrop-filter:blur(6px)}
.contact-card h3{color:#fff;font-size:1.25rem}
.contact-card p{color:#d7ecf7;margin:.6rem 0 1.4rem}
.contact-card .btn{width:100%;justify-content:center;margin-bottom:.8rem}
.socials{display:flex;gap:.7rem;margin-top:1.2rem}
.socials a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:.2s background}
.socials a:hover{background:rgba(255,255,255,.25)}

/* group banner */
.group{background:#fff;border-top:1px solid var(--line)}
.group .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;padding:2.2rem 0}
.group .g-txt{max-width:60ch}
.group .g-txt span{font-family:'Poppins';font-weight:600;color:var(--teal);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.group .g-txt h3{margin:.35rem 0;font-size:1.35rem}
.group .g-txt p{color:var(--muted)}

/* footer */
footer{background:var(--blue-ink);color:#b9d3df;padding:3rem 0 2rem;font-size:.9rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
footer h2,footer .foot-brand{font-family:'Poppins';font-weight:700;color:#fff;font-size:.95rem;margin-bottom:.9rem;letter-spacing:.03em}
.foot-desc{color:#9fbccb;max-width:38ch}
footer a{color:#b9d3df}
footer a:hover{color:#fff}
footer ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.82rem;color:#89a7b5}
.foot-note{font-size:.8rem;color:#7ea0b0;max-width:70ch;margin-top:.6rem;line-height:1.5}
.share-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:2rem;font-size:.82rem;color:#89a7b5}
.share-bar a,.share-bar .share-native{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;transition:.2s background}
.share-bar a:hover,.share-bar .share-native:hover{background:rgba(255,255,255,.25)}
/* Le bouton natif est un <button> : sans cette remise a zero, il herite du style de formulaire de
   l'agent utilisateur et ne ressemble pas aux liens voisins. */
.share-bar .share-native{padding:0;cursor:pointer;color:inherit;font:inherit}

/* ---------- COOKIE CONSENT ---------- */
/* Refonte 1.3.0. En 1.2.0 le bandeau etait une barre blanche a bordure --line, posee sur un body
   en --sky-2 : deux blancs a un cheveu l'un de l'autre, il ne se voyait pas. La carte se detache
   maintenant par le VOILE derriere elle et par une ombre profonde, pas en criant plus fort que la
   maquette. Voir docs/cookies.md.
   position:fixed pour les deux elements : ils ne sont jamais dans le flux, le CLS est donc nul
   par construction (Core Web Vitals, cf. docs/seo.md). */

/* Le voile assombrit la page SANS l'immobiliser : pointer-events:none le rend transparent au
   pointeur. Le visiteur lit, defile et clique la page pendant que le bandeau est ouvert — ce
   n'est pas un cookie wall, et un test le verifie. */
.cookie-veil{position:fixed;inset:0;z-index:100;background:rgba(8,42,61,.45);pointer-events:none;
  animation:cookie-veil-in .28s ease-out both}

.cookie-banner{position:fixed;right:1.5rem;bottom:1.5rem;z-index:101;
  width:min(460px,calc(100% - 2rem));
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);
  border-radius:18px;padding:1.4rem 1.5rem;
  box-shadow:0 26px 60px -18px rgba(8,42,61,.7);
  display:flex;flex-direction:column;gap:1rem;
  /* Le cas a deux categories ajoute deux cases et un troisieme bouton : sur un ecran bas, la
     carte doit defiler seule plutot que de sortir de l'ecran. */
  max-height:calc(100vh - 3rem);overflow-y:auto;
  animation:cookie-banner-in .28s ease-out both}
/* site.js porte le focus sur la carte a l'ouverture, pour que le lecteur d'ecran l'annonce et
   que la tabulation suivante entre dedans. Sans cette regle, la carte s'entoure de l'anneau
   teal de :focus-visible, qui la fait clignoter en bleu vif a chaque ouverture. La retirer ICI
   ne coute rien en accessibilite : le conteneur porte tabindex="-1", il n'est donc PAS dans
   l'ordre de tabulation, et WCAG 2.4.7 ne vise que les elements operables. Les boutons qu'il
   contient, eux, gardent leur anneau. */
.cookie-banner:focus,.cookie-banner:focus-visible{outline:none}
.cookie-banner__title{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.02rem;
  line-height:1.25;color:var(--blue-ink);margin-bottom:.3rem}
.cookie-banner__text p{color:var(--muted);font-size:.92rem}

/* PARITE ACCEPTER / REFUSER : une seule regle pour les deux boutons. Meme remplissage, meme
   taille, meme contraste (#fff sur --blue-deep = 12:1). Donner ici un style moindre a l'un des
   deux serait un dark pattern, pas une nuance graphique — voir docs/cookies.md. */
.cookie-banner__actions{display:flex;gap:.7rem}
.cookie-banner__actions .cookie-btn{flex:1;min-height:44px;padding:.7rem 1.2rem;font-size:.9rem;
  justify-content:center;background:var(--blue-deep);color:#fff;border-color:transparent;
  box-shadow:none}

/* Choix par finalite (deux categories actives seulement). */
.cookie-choices{display:flex;flex-direction:column;gap:.55rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.9rem 0}
.cookie-choice{display:flex;gap:.7rem;align-items:flex-start;min-height:44px;cursor:pointer}
.cookie-choice input{width:20px;height:20px;margin-top:.15rem;flex:0 0 auto;accent-color:var(--blue)}
.cookie-choice b{font-family:'Poppins',sans-serif;font-weight:600;font-size:.9rem;
  color:var(--blue-ink);display:block}
.cookie-choice span{font-size:.84rem;color:var(--muted);line-height:1.45}
/* Troisieme chemin, jamais le seul : « Tout refuser » et « Tout accepter » restent a un clic
   au-dessus, en pleine visibilite. Sa discretion n'enterre donc aucun des deux choix. */
.cookie-save{background:none;border:0;padding:.6rem;min-height:44px;width:100%;cursor:pointer;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.86rem;color:var(--blue-deep);
  text-decoration:underline;text-underline-offset:3px}

/* Entree sobre. Le bloc prefers-reduced-motion de la section ACCESSIBILITE ramene deja toute
   animation a .01ms ; ces deux regles ne servent qu'a nommer l'intention. */
@keyframes cookie-banner-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cookie-veil-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .cookie-banner,.cookie-veil{animation:none}
}

/* Point d'entree permanent du RETRAIT, dans le pied de page. Rendu masque et revele par site.js,
   comme le bouton de partage natif : sans JavaScript il n'y a ni bandeau ni cookie a retirer, un
   bouton visible mais inerte serait pire que son absence. */
.foot-cookies{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:#89a7b5;
  text-decoration:underline;text-underline-offset:3px}
.foot-cookies:hover{color:#fff}

/* ==========================================================================
   PALIERS RESPONSIVE
   La maquette n'en fournissait que deux (900 et 560 px), ce qui laissait deux trous : le menu du
   header se coupait en deux lignes des ~1150 px alors qu'il restait affiche jusqu'a 900, et rien
   n'etait prevu sous 400 px. Les paliers vont du plus large au plus etroit : chacun n'ecrase que
   ce que le precedent laisse inconfortable.
   ========================================================================== */

/* Tablette en paysage et petit portable : le menu horizontal ne tient plus (5 liens + marque +
   bouton), et 4 etapes cote a cote donnent des colonnes de ~220 px ou chaque description part sur
   dix lignes. */
@media(max-width:1080px){
  nav.menu{display:none}
  nav.menu.is-open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    padding:.6rem 5% 1.1rem;border-bottom:1px solid var(--line);gap:0;box-shadow:var(--shadow);
    /* En paysage sur telephone, le menu depasse l'ecran : il doit defiler seul plutot que de
       pousser la page. */
    max-height:calc(100vh - 4.5rem);overflow-y:auto}
  /* Cible tactile : un lien de 20 px de haut se rate au pouce. */
  nav.menu.is-open a{display:flex;align-items:center;min-height:44px}
  .burger{display:flex}
  .steps{grid-template-columns:repeat(2,1fr)}
}

/* Tablette en portrait : les blocs a deux colonnes deviennent trop etroits pour leur texte. */
@media(max-width:900px){
  .grid-3{grid-template-columns:1fr 1fr}
  .band,.split,.why,.contact .grid{grid-template-columns:1fr}
  .band .media{min-height:220px}
  .why .photo-frame{min-height:260px}
  /* Le pied de page passait directement de 3 colonnes a 1, ce qui l'allongeait inutilement sur
     tablette : deux colonnes, le bloc de marque occupant la premiere ligne entiere. */
  footer .cols{grid-template-columns:1fr 1fr;gap:1.6rem 2rem}
  footer .cols > div:first-child{grid-column:1 / -1}
  /* Les rythmes verticaux de la maquette sont dessines pour un grand ecran : conserves tels quels,
     ils obligent a defiler longtemps entre deux contenus sur un ecran haut de 700 px. */
  section{padding:3.5rem 0}
  .hero-inner{padding:4rem 0 6rem}
  .band .txt{padding:2.4rem}
  /* 44 px au doigt pour les deux rangees d'icones. 34 et 42 px satisfont le critere AA (24 px)
     mais restent inconfortables des qu'on vise au pouce — et sous 900 px, on est sur une tablette
     ou un telephone. Au-dela, c'est une souris qui pointe : la taille dessinee suffit. */
  .share-bar a,.share-bar .share-native,.socials a{width:44px;height:44px}
  /* Meme raison, et mesure par le meme banc : le lien de retrait du consentement ne faisait que
     22 px de haut, soit la moitie de la cible au pouce. Le pied de page ne grandit que de
     22 px — le prix d'un acces au retrait qui ne se rate pas. */
  .foot-cookies{display:inline-flex;align-items:center;min-height:44px}
  /* Cinq cibles de 44 px plus le libellé ne tiennent pas sur une ligne de téléphone : le dernier
     bouton se retrouvait seul en dessous. Le libellé prend sa propre ligne, les icônes restent
     groupées (5 x 44 + 4 x 9,6 = 258 px, il y a la place). */
  .share-bar{gap:.6rem}
  .share-bar > span{flex-basis:100%}
  /* La carte de consentement quitte le coin bas-droit : sur tablette et telephone, une carte de
     460 px calee a droite laisse une bande vide a gauche et rate le pouce. Pleine largeur. */
  .cookie-banner{left:1rem;right:1rem;bottom:1rem;width:auto}
}

/* Telephone. */
@media(max-width:560px){
  .grid-3,.steps{grid-template-columns:1fr}
  .why .facts{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr}
  .brand-txt span{display:none}
  .brand .logo-box,.brand .logo-box img{height:40px}
  /* Le bouton du header cede la place au burger : a cette largeur, « Prendre rendez-vous » se
     coupait en deux lignes a cote de la marque et desequilibrait tout l'en-tete. L'appel a
     l'action n'est pas perdu — le hero affiche « Demander votre CertIBEau » et le numero de
     telephone des le premier ecran, et le menu du burger mene au contact. */
  .nav .btn{display:none}
  section{padding:3rem 0}
  .hero-inner{padding:3rem 0 4.5rem}
  .hero p.lead{font-size:1.06rem}
  /* 3 rem de padding sur un ecran de 390 px ne laissaient que 294 px au texte. */
  .band .txt{padding:1.8rem 1.4rem}
  .contact-card{padding:1.5rem}
  .contact .grid{gap:2rem}
  /* La vague decorative gardait 90 px de haut quelle que soit la largeur, soit une bande vide
     disproportionnee sur telephone. */
  .wave-sep svg{height:56px}
  /* Les deux appels a l'action du hero passaient a la ligne par flex-wrap, avec deux largeurs
     differentes. Empiles en pleine largeur, ils forment deux cibles franches. Le seuil est celui du
     telephone et non 400 px, sinon un iPhone 13 (390 px) et un iPhone 14 Plus (428 px) n'auraient
     pas la meme presentation. */
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btn{width:100%;justify-content:center}
}

/* Petits telephones : deux tuiles de chiffres cles cote a cote n'y laissent plus la place de lire
   leur libelle, et l'en-tete a besoin de chaque pixel. */
@media(max-width:400px){
  .why .facts{grid-template-columns:1fr}
  .nav{gap:.5rem}
  .brand{gap:.5rem}
  .brand-txt strong{font-size:.95rem}
  /* « Tout refuser » et « Tout accepter » cote a cote demandent ~150 px chacun : a 320 px de
     large, le second se coupait en deux lignes. Empiles, ils gardent leur parite — memes
     dimensions, meme style — et le refus reste en premier. */
  .cookie-banner__actions{flex-direction:column}
}