/* =====================================================================
   FINANCE-IMMO.COM — Styles propres à la page d’accueil
   Le socle commun (grille, typographie, boutons, en-tête, pied de page)
   vit dans style.css, chargé AVANT ce fichier. On ne trouve ici que ce
   qui n’existe sur aucune autre page : hero, simulateur, bandeau de
   confiance, avis, statistiques, agences, actualités.
   ===================================================================== */

/* =====================================================================
   CONFIG — NOM DU SITE / INFOS PERSO : chercher les commentaires MAJUSCULES
   Palette pensée pour la confiance : bleu (convention du secteur),
   or en accent, vert pour la réassurance, fond clair chaleureux.
   ===================================================================== */

/* ============================ BASE ============================ */

/* ---- Microtypographie : équilibre des titres, pas de mot orphelin,
        aucune césure automatique en milieu de mot ---- */
h1,h2,h3,h4,.intent,legend{text-wrap:balance}
p,li,.lead,blockquote,figcaption{text-wrap:pretty}

.idx{font-size:.84rem;font-weight:600;color:var(--gold)}

/* chiffres alignés (taux, montants) */

/* ============================ BUTTONS ============================ */

/* ============================ HEADER ============================ */

/* Ces deux regles ont ete retirees le 08/09/2026 :

     .nav a:hover{color:var(--navy)}
     .nav a:hover::after{width:100%}

   C'etaient des doublons de style.css, restes ici lors de l'extraction des
   styles en ligne de index.html. Sans consequence tant que l'en-tete etait
   clair. Le bandeau passe au bleu, elles sont devenues nuisibles : chargee
   apres style.css, la premiere repeignait le lien survole en bleu sur un
   fond bleu, et le mot disparaissait sous le curseur. Sur la seule page
   d'accueil, ce qui rendait le defaut d'autant plus deroutant.

   Regle a en tirer : cette feuille ne doit contenir que ce qui est propre a
   la page d'accueil. Tout ce qui touche a l'en-tete ou au pied de page
   appartient a style.css, et nulle part ailleurs. */

/* TÉLÉPHONE */

/* ============================ HERO ============================ */
.hero{padding:72px 0 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-180px;right:-140px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,53,107,.07),transparent 68%);pointer-events:none}
.hero .container{position:relative;z-index:2}
/* align-items:start et non center : la carte du simulateur est bien plus haute
   que la colonne de texte, et le centrage repoussait celle-ci vers le bas en
   laissant un vide au-dessus. Le decalage se loge desormais sous le texte,
   ou il se lit comme une respiration et non comme un oubli. */
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:start}
.hero h1{margin-bottom:22px}

/* bandeau taux moyen (hero) */
.ratebar{display:inline-flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:12px 18px;margin-bottom:20px;box-shadow:var(--shadow)}
.ratebar .val{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--navy);line-height:1}
.ratebar .val.todo{font-size:1rem;font-weight:600;color:var(--gold);border:1px dashed var(--gold);
  border-radius:8px;padding:4px 12px;font-family:var(--sans)}
.ratebar .lb{font-size:.9rem;color:var(--muted);line-height:1.4}
.ratebar .lb b{color:var(--ink);font-weight:600;display:block}

/* L'encart de taux vit maintenant au pied de la carte du simulateur, et non
   plus en haut de la page. Dans ce contexte, le fond blanc et la bordure de la
   regle ci-dessus donneraient une boite blanche posee dans une carte blanche.
   On les retire au profit d'un simple filet de separation, et on l'etale sur
   toute la largeur pour qu'il se lise comme le bas de la carte plutot que
   comme un element rapporte. Le chiffre est degrade : c'est un repere, pas le
   resultat du simulateur, qui doit rester ce que l'oeil accroche en premier. */
.simcard .ratebar{display:flex;width:100%;background:none;border:0;box-shadow:none;
  border-top:1px solid var(--line);border-radius:0;padding:16px 0 0;margin:16px 0 0}
.simcard .ratebar .val{font-size:1.25rem;color:var(--navy-dp)}
.simcard .ratebar .lb{font-size:.84rem}

/* projets de vie */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:24px}
.proj{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px 24px;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.proj:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d5d0c6}
.proj .ico{width:46px;height:46px;border-radius:12px;background:var(--navy-lt);color:var(--navy);
  display:grid;place-items:center;font-size:1.25rem;margin-bottom:18px}
.proj .intent{font-family:var(--display);font-size:1.12rem;font-weight:600;color:var(--navy-dp);
  line-height:1.42;padding-left:15px;border-left:3px solid var(--gold);margin-bottom:14px}
.proj p{color:var(--muted);font-size:.97rem;line-height:1.6;flex:1}
.proj .go{margin-top:18px;color:var(--navy);font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:7px}
.proj .go .arw{transition:transform .3s}
.proj:hover .go .arw{transform:translateX(4px)}

/* note d'avis en ligne (hero) */
.inline-rating{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:.96rem;color:var(--muted)}
.inline-rating .stars{color:var(--gold);letter-spacing:2px}
.inline-rating b{color:var(--navy-dp);font-weight:700}

/* simulateur */
.simcard{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:32px}
.simcard h2{font-size:1.32rem;margin-bottom:4px}
.simcard .sub{font-size:.94rem;color:var(--muted);margin-bottom:26px}
.field{margin-bottom:24px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-size:.94rem;font-weight:500;margin-bottom:11px}
.field label b{font-family:var(--display);font-size:1.16rem;font-weight:700;color:var(--navy)}
.field input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--navy);outline:none}
.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--navy);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(18,53,107,.45)}
.field input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--navy);cursor:pointer;border:3px solid #fff}
/* Graduations sous les curseurs */
.field .ticks{position:relative;height:20px;margin-top:7px}
.field .ticks i{position:absolute;top:0;width:1px;height:5px;background:#B9C4D6;transform:translateX(-50%)}
.field .ticks span{position:absolute;top:8px;font-size:.72rem;color:var(--muted);
  transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.field .rate-src{font-size:.8rem;color:var(--muted);margin-top:7px}

/* Bascule entre les deux sens de calcul */
.sim-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--navy-lt);
  border-radius:10px;padding:4px;margin-bottom:24px}
.sim-tabs button{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--navy);
  background:none;border:0;border-radius:7px;padding:9px 8px;cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s}
.sim-tabs button[aria-pressed=true]{background:var(--white);color:var(--navy-dp);
  box-shadow:0 1px 3px rgba(18,53,107,.16)}
.simcard[data-mode=cap] .seul-pay{display:none}
.simcard[data-mode=pay] .seul-cap{display:none}

/* Capacite d emprunt par duree */
.captab{margin:0 0 18px}
.captab .ct-h{font-size:.86rem;font-weight:600;color:var(--muted);margin-bottom:10px}
.captab .ct-row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;
  padding:9px 12px;border-radius:8px;font-size:.94rem}
.captab .ct-row+.ct-row{margin-top:2px}
.captab .ct-row span{color:var(--muted)}
.captab .ct-row em{font-style:normal;font-size:.84rem;color:var(--muted)}
.captab .ct-row b{font-family:var(--display);font-size:1.1rem;font-weight:700;color:var(--navy-dp)}
.captab .ct-row.on{background:var(--navy-lt)}
.captab .ct-row.on span,.captab .ct-row.on em{color:var(--navy)}

/* ---- Frais d acquisition, colonne de gauche du hero ---- */
.notaire{margin-top:40px;padding:24px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.55);max-width:480px}
.notaire .nt-head h2{font-size:1.16rem;margin-bottom:4px}
.notaire .nt-head p{font-size:.92rem;color:var(--muted);margin-bottom:20px;line-height:1.5}
.nt-choix{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--navy-lt);
  border-radius:10px;padding:4px;margin-bottom:20px}
.nt-choix button{font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--navy);
  background:none;border:0;border-radius:7px;padding:8px;cursor:pointer;transition:background .25s,box-shadow .25s}
.nt-choix button[aria-pressed=true]{background:var(--white);color:var(--navy-dp);box-shadow:0 1px 3px rgba(18,53,107,.16)}
.nt-res{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--navy-lt);border-radius:12px;padding:16px 20px}
.nt-lb{font-size:.88rem;color:var(--muted)}
.nt-val{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--navy-dp);line-height:1.2}
.nt-pct{font-family:var(--display);font-size:1.16rem;font-weight:700;color:var(--gold)}
.nt-mention{font-size:.84rem;color:var(--muted);line-height:1.5;margin-top:14px}
@media(max-width:620px){
  .notaire{padding:20px}
  .nt-res{flex-direction:column;align-items:flex-start;gap:6px}
}
.result{background:var(--navy-lt);border-radius:14px;padding:20px;text-align:center;margin:26px 0 18px}
.result .lb{font-size:.92rem;color:var(--muted)}
.result .val{font-family:var(--display);font-size:clamp(2rem,3.4vw,2.5rem);font-weight:700;color:var(--navy-dp);line-height:1.15}
.result .sfx{font-size:1rem;font-weight:500;color:var(--muted)}
.disclaimer{font-size:.82rem;color:var(--muted);line-height:1.55;margin-top:15px}
/* Détails du coût — « hero épuré, détails à la demande » */
.sim-details{margin:0 0 18px;border-top:1px solid var(--line);padding-top:14px}
.sim-details summary{cursor:pointer;font-size:.94rem;font-weight:600;color:var(--navy);list-style:none;
  display:flex;align-items:center;gap:8px}
.sim-details summary::-webkit-details-marker{display:none}
.sim-details summary::before{content:"+";font-size:1.05rem;line-height:1;color:var(--gold);font-weight:700}
.sim-details[open] summary::before{content:"–"}
.sd-inner{padding-top:14px}
.sd-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;font-size:.96rem;color:var(--muted)}
.sd-row b{color:var(--navy-dp);font-weight:700}
.sd-hi{border-top:1px solid var(--line);margin-top:4px;padding-top:12px}
.sd-hi b{color:var(--gold)}
.sd-note{font-size:.84rem;color:var(--muted);line-height:1.55;margin-top:10px}

/* ============================ BANDE CONFIANCE ============================ */
.trustbar{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trustbar .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tb{padding:32px 24px;display:flex;align-items:center;gap:14px;position:relative}
.tb+.tb::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--line)}
.tb .ic{width:42px;height:42px;border-radius:11px;background:var(--navy-lt);color:var(--navy);display:grid;place-items:center;font-size:1.15rem;flex:0 0 auto}
.tb b{display:block;font-size:1rem;color:var(--navy-dp);font-weight:600;line-height:1.35}
.tb span{font-size:.88rem;color:var(--muted)}

/* ============================ SECTION HEAD ============================ */
.shead{max-width:62ch;margin-bottom:56px}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead.center .eyebrow{justify-content:center}

/* ============================ CARDS ============================ */

/* ============================ INTERLOCUTEUR ============================ */
.who{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.who-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.who-photo{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(170deg,var(--navy-lt),#dde7f4)}
/* height:auto est indispensable depuis que la balise porte width et height :
   sans lui, l'attribut height="1560" s'applique tel quel et l'image part en
   1560 px de haut pour 462 de large. Avec lui, les deux attributs ne servent
   plus qu'a donner le rapport 1364/1560, que le navigateur reserve avant meme
   d'avoir telecharge la photo. display:block supprime l'espace de ligne de
   base sous l'image, visible ici parce que le cadre a un fond degrade. */
.who-photo img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.who blockquote{font-family:var(--display);font-size:clamp(1.25rem,2.1vw,1.6rem);font-weight:500;
  line-height:1.5;color:var(--navy-dp);border-left:3px solid var(--gold);padding-left:22px;margin:24px 0}
.sig{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.sig .nm{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--navy-dp)}
.sig .rl{font-size:.94rem;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);
  border-radius:800px;padding:9px 16px;font-size:.9rem;font-weight:500;color:var(--ink)}
.pill i{color:var(--green);font-style:normal;font-weight:700}

/* ============================ AVIS ============================ */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:24px}
.rev{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.rev:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.rev-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rev-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:1.05rem;flex:0 0 auto}
.rev-nm{font-weight:600;font-size:1rem;color:var(--ink);line-height:1.3}
.rev-dt{font-size:.86rem;color:var(--muted)}
.rev .stars{color:var(--gold);letter-spacing:2px;font-size:.92rem;margin-bottom:11px}
.rev p{font-size:.98rem;line-height:1.62;color:var(--ink);flex:1}
.rev-src{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.rev-src b{font-weight:700;color:var(--ink)}
.srcbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;
  max-width:720px;margin:0 auto 40px}
.src{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;display:flex;align-items:center;gap:16px}
.src .logo-b{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-weight:700;font-size:1.15rem;flex:0 0 auto}
.src .nm{font-size:.9rem;color:var(--muted);line-height:1.35}
.src .sc{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--navy-dp);line-height:1.15}
.src .sc small{font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--muted)}
.src .stars{color:var(--gold);letter-spacing:1px;font-size:.8rem;display:block}
.rev-notice{max-width:78ch;margin:0 auto 30px;text-align:center;font-size:.88rem;color:var(--muted);line-height:1.6}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px 24px;transition:transform .3s,box-shadow .3s}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.quote .stars{color:var(--gold);letter-spacing:2px;font-size:.92rem;margin-bottom:12px}
.quote p{font-size:1.03rem;line-height:1.62;color:var(--ink)}
.quote .who2{margin-top:18px;font-size:.92rem;color:var(--muted);font-weight:500}

/* ============================ STATS ============================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.stat{padding:40px 24px;text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.stat .v{font-family:var(--display);font-size:clamp(2.3rem,4vw,3.2rem);font-weight:700;color:var(--navy);line-height:1}
.stat .k{font-size:.98rem;color:var(--muted);margin-top:8px}

/* ============================ PROCESSUS ============================ */

.steps-grid .step:not(:last-child)::after{content:"";position:absolute;top:27px;left:74px;right:-24px;
  height:2px;background:linear-gradient(90deg,var(--navy-lt),var(--line));z-index:0}
@media(max-width:820px){
  .steps-grid{grid-template-columns:1fr;gap:30px}
  .steps-grid .step::after{display:none!important}
}

/* ============================ ZONE D'INTERVENTION ============================ */
.zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}
.agency{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  display:flex;gap:16px;align-items:flex-start;transition:transform .3s,box-shadow .3s,border-color .3s}
.agency:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d5d0c6}
.agency .pin2{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:1.2rem;flex:0 0 auto}
.agency h3{font-size:1.2rem;margin-bottom:4px}
.agency .dep{font-size:.9rem;color:var(--gold);font-weight:600;margin-bottom:8px}
.agency p{font-size:.96rem;color:var(--muted);line-height:1.55}
.agency .ag-meta{display:flex;align-items:flex-start;gap:9px;margin-top:8px;font-size:.94rem}
.agency .ag-meta span{font-size:.9rem}
.agency .ag-meta a{color:var(--navy);font-weight:600}
.deps{display:flex;flex-wrap:wrap;gap:10px}
.dep-chip{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);
  border-radius:800px;padding:10px 18px;font-size:.96rem;font-weight:500;color:var(--ink)}
.dep-chip .num{font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dep-note{font-size:.96rem;color:var(--muted);margin-top:22px}

/* ============================ AGENCE ============================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* ---- Cadre photo à zone de texte conçue -----------------------------
   Le texte n'est jamais posé SUR l'image avec un voile de rattrapage :
   il occupe une bande bleue pleine, sous la photo. Le contraste est donc
   garanti par construction, quelle que soit la photo fournie.
   -------------------------------------------------------------------- */
.mapcard{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.mapcard .top{aspect-ratio:16/10;position:relative;background:linear-gradient(160deg,var(--navy-lt),#e9eff7);overflow:hidden}
.mapcard .top img{width:100%;height:100%;object-fit:cover;display:block}
/* état sans photo : repère neutre, honnête, jamais une fausse carte */
.mapcard .placeholder{position:absolute;inset:0;display:grid;place-items:center;gap:10px;
  align-content:center;text-align:center;padding:24px;color:var(--muted);font-size:.92rem;
  background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(18,53,107,.05) 12px 24px)}
.mapcard .placeholder .pin{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:1.4rem;
  box-shadow:0 0 0 10px rgba(18,53,107,.12),0 0 0 22px rgba(18,53,107,.06)}
/* la zone de texte : bande pleine, contraste mesuré à 12:1 */
.mapcard .bot{background:var(--navy-dp);color:#fff;padding:24px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mapcard .adr{font-size:1rem;line-height:1.5;color:#C3D0E4}
.mapcard .adr b{color:#fff;font-weight:700}
.mapcard .bot .btn{border-color:rgba(255,255,255,.5);color:#fff}
.mapcard .bot .btn:hover{background:#fff;color:var(--navy-dp);border-color:#fff}

/* ============================ BAND ============================ */

/* ============================ NEWS ============================ */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.art{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.art:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.art .thumb{aspect-ratio:16/9;background:linear-gradient(150deg,var(--navy-lt),#dfe8f4);display:grid;place-items:center;font-size:1.8rem;color:var(--navy);opacity:.85}
.art .body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.art .tag{font-size:.84rem;font-weight:600;color:var(--gold)}
.art h3{font-size:1.16rem;line-height:1.38}
.art p{font-size:.95rem;color:var(--muted);line-height:1.6;flex:1}
.art .date{font-size:.9rem;color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
.art .key{display:inline-block;background:var(--navy-lt);color:var(--navy);font-weight:700;
  font-size:.9rem;padding:3px 10px;border-radius:6px;font-variant-numeric:tabular-nums}

/* ============================ FAQ ============================ */

/* ============================ FOOTER ============================ */

/* #7D8A9E ne passait pas le contraste AA (4,2:1) sur le bleu foncé — corrigé */

@media(max-width:700px){
  .orias-bar{grid-template-columns:1fr}
}

/* ============================ REVEAL ============================ */

/* ============================ RESPONSIVE ============================ */
/* Le menu horizontal ne tient sur une ligne qu’au-dessus de 1195 px : en dessous, hamburger. */

@media(max-width:1080px){
  .quotes,.news{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr 1fr}
  .regions{grid-template-columns:1fr 1fr;gap:0 24px}
  .split,.who-grid,.zone-grid{grid-template-columns:1fr;gap:40px}
  .trustbar .container{grid-template-columns:1fr 1fr}
  .tb:nth-child(3)::before{display:none}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .simcard{max-width:520px;margin:0 auto;width:100%}
  .stats{grid-template-columns:1fr}
  .stat+.stat::before{left:20%;right:20%;top:0;bottom:auto;width:auto;height:1px}
}
@media(max-width:620px){
  .grid-4,.projects,.regions,.fgrid,.trustbar .container,.zone-grid{grid-template-columns:1fr}
  /* En-tête compact : le bouton ne doit ni passer à la ligne ni chevaucher le logo */
  .tb::before{display:none!important}
  .simcard{padding:24px}
}

/* ============================ ACCESSIBILITÉ ============================ */
/* texte réservé aux lecteurs d'écran (invisible à l'œil) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* respect du réglage système « réduire les animations » */


/* ============================ CHOIX D'ENTREE ============================
   Menu des six parcours, en tete de page. Il prolonge le bleu de l'en-tete :
   les deux ne forment qu'une seule zone sombre, et le beige du hero marque
   ensuite la rupture. D'ou le padding-top reduit, qui evite une double
   respiration entre deux fonds identiques.

   Pas de couleur par carte. Le modele d'ou vient l'idee en emploie six
   differentes, mais six teintes vives sont la signature de QUELQU'UN D'AUTRE :
   ici l'identite tient au navy et a l'or, et c'est l'or qui marque le survol.
   ======================================================================= */

.entree{background:var(--navy);padding:4px 0 40px}
.entree-titre{font-family:var(--display);font-size:1.06rem;font-weight:600;color:#fff;
  margin:0 0 18px;opacity:.9}

.entree-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.entree-grille a{display:flex;align-items:center;gap:14px;background:var(--white);
  border:1.5px solid transparent;border-radius:14px;padding:14px 16px;min-height:72px;
  box-shadow:0 6px 20px rgba(8,24,52,.18);
  transition:transform .22s,border-color .22s,box-shadow .22s}
.entree-grille a:hover{transform:translateY(-2px);border-color:var(--gold);
  box-shadow:0 14px 30px rgba(8,24,52,.26)}

.entree-grille .ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  display:grid;place-items:center;background:var(--navy-lt);color:var(--navy)}
.entree-grille .ic svg{width:22px;height:22px;fill:currentColor;display:block}

.entree-grille .tx{flex:1;line-height:1.25;min-width:0}
.entree-grille .tx small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.entree-grille .tx strong{display:block;font-size:.98rem;font-weight:600;color:var(--navy-dp)}

/* La fleche est un trace, pas un aplat : fill:none et un trait, sinon le
   chevron se remplit et devient un triangle noir. */
.entree-grille .fl{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:var(--gold);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s}
.entree-grille a:hover .fl{transform:translateX(3px)}

@media(max-width:900px){
  .entree-grille{grid-template-columns:repeat(2,1fr)}
}

/* Sous 620 px, les cartes basculent a la VERTICALE : pictogramme au-dessus,
   libelle en dessous, deux par ligne. En restant horizontales, six cartes
   pleine largeur repoussaient le titre de la page a pres de mille pixels, et
   « Regroupement de credits » cassait sur deux lignes en ecrasant tout.

   Le chevron disparait ici : dans une carte centree il n'indique plus de
   direction, et il volait de la place au libelle. Une carte de cette taille
   se voit assez pour qu'on la clique. */
@media(max-width:620px){
  .entree{padding-bottom:32px}
  /* grid-auto-rows:1fr aligne TOUTES les rangees sur la plus haute. Sans lui,
     la rangee ou « Regroupement de credits » passe a la ligne fait 142 px
     quand les autres en font 126, et la grille parait bancale. */
  .entree-grille{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:10px}

  .entree-grille a{flex-direction:column;align-items:center;justify-content:flex-start;
    text-align:center;gap:10px;min-height:126px;padding:16px 10px}
  .entree-grille .ic{width:42px;height:42px}
  .entree-grille .ic svg{width:23px;height:23px}
  .entree-grille .tx{flex:0 1 auto}
  .entree-grille .tx small{font-size:.62rem;margin-bottom:4px}
  /* Les libelles longs doivent pouvoir se couper : sans cela, « Regroupement
     de credits » deborde de sa carte au lieu de passer a la ligne. */
  .entree-grille .tx strong{font-size:.92rem;line-height:1.3;overflow-wrap:break-word;hyphens:auto}
  .entree-grille .fl{display:none}
}