/* ==========================================================================
   SECUNDIS — ACCUEIL V2 (28/09/2026) · esprit maquette 1, recherche + carte remontées
   Mobile d'abord vérifié à 360, 390 et 430 px ; desktop à 1280, 1440 et 1920 px.
   ========================================================================== */

/* ---------------------------------------------------------------- héros */
.h2-heros{position:relative; background:linear-gradient(180deg,var(--ivoire) 0%,#F8F1E6 100%); padding:1.8rem 0 5.6rem; overflow:hidden}
.h2-heros::before{content:""; position:absolute; right:-12%; top:-30%; width:62%; height:150%; background:radial-gradient(closest-side,rgba(184,101,63,.08),transparent 70%); pointer-events:none}
.h2-heros-grille{display:grid; grid-template-columns:1.25fr .75fr; gap:3rem; align-items:center; position:relative}
.h2-titre{margin:0 0 1.1rem; display:flex; flex-direction:column; gap:.55rem}
.h2-surtitre{font-family:var(--corps); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--texte-2); line-height:1.4}
.h2-slogan{font-family:var(--titres); font-weight:600; font-size:clamp(2.6rem,4.5vw,4.1rem); line-height:1.02; color:var(--marine); letter-spacing:-.01em}
.h2-slogan em{font-style:normal; color:var(--vert-clair)}
.h2-chapeau{font-size:1.08rem; line-height:1.55; color:var(--texte); max-width:30em; margin:0 0 1.2rem}
.preuves3--heros{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin:0 0 1.4rem; padding:.95rem 0; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait)}
.h2-cta{display:flex; flex-wrap:wrap; gap:.8rem}
.h2-visuel{margin:0; position:relative; height:clamp(420px,58vh,540px); justify-self:end; width:min(100%,440px)}
.h2-visuel img{width:100%; height:100%; object-fit:cover; border-radius:220px 220px 26px 26px; box-shadow:0 30px 60px rgba(31,49,72,.16)}
.h2-heros .h2-manuscrit{position:absolute; left:-3rem; bottom:2.4rem; font-size:2.2rem; color:var(--marine); background:rgba(251,247,240,.92); padding:.6rem 1.2rem .5rem; border-radius:14px; transform:rotate(-5deg); box-shadow:0 12px 30px rgba(31,49,72,.12); margin:0}

/* ---------------------------------------------------------------- recherche + carte (chevauche le héros) */
.h2-recherche{position:relative; margin-top:-4.6rem; z-index:2; padding-bottom:1rem}
.h2-recherche-boite{display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; background:#fff; border:1px solid var(--trait); border-radius:26px; box-shadow:0 26px 60px rgba(31,49,72,.12); padding:1.8rem 1.9rem}
.h2-recherche-form h2{font-size:clamp(1.7rem,2.6vw,2.2rem); margin:0 0 .25rem}
.h2-recherche-sous{color:var(--texte-2); font-size:.9rem; margin:0 0 1.1rem}
.h2-recherche-sous b{color:var(--vert)}
.h2-recherche .moteur--heros{box-shadow:none; border:0; padding:0; background:none; grid-template-columns:1fr 1fr; gap:.8rem .9rem; max-width:none}
.h2-recherche .moteur--heros .bouton{grid-column:1 / -1; padding:.95rem 1.3rem}
.h2-recherche .moteur--heros select,.h2-recherche .multi-bouton{background:var(--ivoire); min-height:46px}
.h2-recherche-profils{display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center; margin:1rem 0 0; font-size:.8rem}
.h2-recherche-profils span{color:var(--texte-2); margin-right:.2rem}
.h2-recherche-profils a{text-decoration:none; color:var(--vert); background:var(--sauge-15); border-radius:999px; padding:.3rem .75rem; font-weight:600}
.h2-recherche-profils a:hover{background:var(--vert); color:#fff}
.h2-recherche-carte .carte{box-shadow:none; border:0; padding:0; background:none}
.h2-recherche-carte .carte h2{font-size:1.25rem; margin-bottom:.4rem}
.h2-recherche-carte .carte-france svg{max-height:380px; width:100%}

/* ---------------------------------------------------------------- sections */
.h2-section{padding:5rem 0}
.h2-tete{text-align:center; max-width:46em; margin:0 auto 2.8rem}
.h2-tete h2{font-size:clamp(2.1rem,3.4vw,2.9rem); margin:0 0 .6rem}
.h2-tete p{color:var(--texte-2); font-size:1.02rem; margin:0}
.h2-tete--ligne{display:flex; justify-content:space-between; align-items:flex-end; text-align:left; max-width:none; gap:1.5rem; flex-wrap:wrap}
.h2-lien{color:var(--vert); font-weight:600; text-decoration:none; font-size:.9rem; white-space:nowrap}
.h2-centre{text-align:center; margin:2.4rem 0 0}

/* parcours */
.h2-parcours{padding-top:4.2rem}
.h2-etapes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; counter-reset:none; position:relative}
.h2-etapes li{text-align:center; position:relative; padding:0 .4rem}
.h2-etapes li:not(:last-child)::after{content:"→"; position:absolute; right:-1.2rem; top:1.9rem; color:#C3B7A5; font-size:1.2rem}
.h2-etape-ico{width:78px; height:78px; border-radius:50%; background:var(--sable); color:var(--marine); display:inline-flex; align-items:center; justify-content:center; margin-bottom:.9rem}
.h2-etape-ico svg{width:36px; height:36px}
.h2-etapes b{display:block; font-family:var(--titres); font-size:1.5rem; color:var(--terracotta); line-height:1; margin-bottom:.35rem}
.h2-etapes h3{font-family:var(--corps); font-size:.98rem; font-weight:600; line-height:1.35; margin:0 0 .35rem}
.h2-etapes p{font-size:.86rem; color:var(--texte-2); margin:0}

/* profils */
.h2-profils{background:linear-gradient(180deg,#F1F4EE 0%,var(--ivoire) 100%)}
.h2-profils-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.h2-profil{background:#fff; border:1px solid var(--trait); border-radius:22px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .18s,box-shadow .18s}
.h2-profil:hover{transform:translateY(-4px); box-shadow:var(--ombre-2)}
.h2-profil-visuel{height:150px; background-size:cover; background-position:center; position:relative; display:flex; align-items:flex-end; padding:0 1.4rem}
.h2-profil--securite .h2-profil-visuel{background-color:#DCE6DA; background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.7),transparent 45%),linear-gradient(135deg,#E6EEE3,#C9D8C6)}
.h2-profil--equilibre .h2-profil-visuel{background-color:#DCE6EE; background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.7),transparent 45%),linear-gradient(135deg,#E6EEF4,#C5D6E3)}
.h2-profil--dynamique .h2-profil-visuel{background-color:#F1DFD1; background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.7),transparent 45%),linear-gradient(135deg,#F6E8DE,#E9C9B3)}
.h2-profil--photo .h2-profil-visuel{height:180px}
.h2-profil-ico{width:58px; height:58px; border-radius:50%; background:var(--vert); color:#fff; display:flex; align-items:center; justify-content:center; transform:translateY(50%); box-shadow:0 8px 20px rgba(31,49,72,.18); border:3px solid #fff}
.h2-profil--equilibre .h2-profil-ico{background:var(--bleu-doux)}
.h2-profil--dynamique .h2-profil-ico{background:#D9864E}
.h2-profil-ico svg{width:28px; height:28px}
.h2-profil-corps{padding:2.3rem 1.4rem 1.4rem; display:flex; flex-direction:column; flex:1}
.h2-profil-corps h3{font-size:1.9rem; margin:0 0 .3rem}
.h2-profil-accroche{font-weight:600; color:var(--marine); font-size:.95rem; margin:0 0 .4rem}
.h2-profil-corps p{font-size:.88rem; color:var(--texte-2)}
.h2-profil-lien{margin-top:auto; padding-top:.6rem; color:var(--vert); font-weight:600; font-size:.88rem}

/* mini-simulateur */
.h2-sim-boite{display:grid; grid-template-columns:.9fr 1.1fr 1fr; gap:2rem; background:#fff; border:1px solid var(--trait); border-radius:26px; padding:2.2rem; box-shadow:var(--ombre-1); align-items:center}
.h2-sim-ico{width:52px; height:52px; border-radius:14px; background:var(--sable); color:var(--marine); display:inline-flex; align-items:center; justify-content:center; margin-bottom:.8rem}
.h2-sim-ico svg{width:28px; height:28px}
.h2-sim-intro h2{font-size:clamp(1.8rem,2.6vw,2.3rem); margin:0 0 .5rem}
.h2-sim-intro p{color:var(--texte-2); margin:0}
.h2-sim-champ{display:block; margin-bottom:1.3rem}
.h2-sim-champ > span{display:flex; justify-content:space-between; align-items:baseline; font-weight:600; font-size:.85rem; color:var(--marine); margin-bottom:.55rem}
.h2-sim-champ output{font-weight:700; font-size:1.05rem; color:var(--vert)}
.h2-sim-champ input[type=range]{--p:30%; -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px; background:linear-gradient(90deg,var(--vert) var(--p),#E9E1D4 var(--p)); outline:none}
.h2-sim-champ input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid var(--vert); box-shadow:0 3px 8px rgba(31,49,72,.2); cursor:pointer}
.h2-sim-champ input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--vert); cursor:pointer}
.h2-sim-note{font-size:.75rem; color:var(--texte-2); margin:0}
.h2-sim-resultats{background:var(--menthe); border-radius:20px; padding:1.4rem 1.4rem 1.3rem}
.h2-sim-effort{margin:0 0 .8rem; display:flex; flex-direction:column}
.h2-sim-effort span{font-size:.8rem; font-weight:600; color:var(--texte-2); text-transform:uppercase; letter-spacing:.1em}
.h2-sim-effort b{font-family:var(--titres); font-size:2.6rem; line-height:1.05; color:var(--marine)}
.h2-sim-effort--positif b{color:var(--vert)}
.h2-sim-effort small{color:var(--texte-2)}
.h2-sim-resultats ul{list-style:none; margin:0 0 1.1rem; padding:0}
.h2-sim-resultats li{display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0; border-bottom:1px dashed rgba(47,92,69,.2); font-size:.86rem}
.h2-sim-resultats li b{color:var(--marine)}
.h2-sim-resultats .bouton{width:100%}

/* sélection */
.h2-selection{padding-top:3rem}
.lots--4{grid-template-columns:repeat(4,1fr)}
.lots--6{grid-template-columns:repeat(3,1fr)}

/* éditorial */
.h2-editorial{background:var(--papier)}
.h2-editorial .guides{grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:auto auto}
.h2-editorial .guide--pilier{grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-end; padding:2.2rem 2rem}
.h2-editorial .guides .guide:nth-child(n+2){padding:1.4rem 1.4rem}
.h2-seo-texte{max-width:56em; margin:2.4rem auto 0; text-align:center}
.h2-seo-texte p{font-size:.86rem; color:var(--texte-2); margin:0}

/* exploitants */
.h2-exploitants-titre{font-family:var(--corps); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--texte-2); font-weight:600; margin:0 0 .8rem; text-align:center}

/* appel final */
.h2-fin{background:var(--marine); color:#D5DCE5; padding:4.5rem 0}
.h2-fin-grille{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}
.h2-fin h2{color:#fff; font-size:clamp(2rem,3.2vw,2.8rem); margin:0 0 .8rem}
.h2-fin p{color:#C9D2DD; margin:0 0 1.6rem; max-width:34em}
.h2-manuscrit--fin{font-size:2.3rem; color:#E9C9B3 !important; margin:0 0 .2rem !important}
.h2-confiance{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:0}
.h2-confiance div{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1.1rem 1.2rem}
.h2-confiance dt{font-family:var(--titres); font-size:2.1rem; font-weight:700; color:#fff; line-height:1}
.h2-confiance dd{margin:.3rem 0 0; font-size:.82rem; color:#C9D2DD}

/* ---------------------------------------------------------------- tablettes */
@media (max-width:1180px){
  .h2-sim-boite{grid-template-columns:1fr 1fr}
  .h2-sim-intro{grid-column:1 / -1}
  .lots--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1023px){
  .h2-heros{padding:2rem 0 5.5rem}
  .h2-heros-grille{grid-template-columns:1fr 1fr; gap:2rem}
  .preuves3--heros{grid-template-columns:1fr; gap:.7rem}
  .h2-recherche-boite{grid-template-columns:1fr}
  .h2-recherche-carte .carte-france svg{max-height:340px}
  .h2-etapes{grid-template-columns:repeat(2,1fr); row-gap:2.2rem}
  .h2-etapes li::after{display:none}
  .h2-profils-grille{grid-template-columns:1fr 1fr}
  .h2-editorial .guides{grid-template-columns:1fr 1fr}
  .h2-editorial .guide--pilier{grid-column:1 / -1; grid-row:auto}
  .h2-fin-grille{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- mobile */
@media (max-width:760px){
  .h2-heros{padding:0 0 1.5rem}
  .h2-heros-grille{display:flex; flex-direction:column-reverse; gap:1.3rem}
  .h2-visuel{aspect-ratio:auto; height:210px; max-height:none; width:calc(100% + 2.3rem); margin:0 -1.15rem; justify-self:stretch}
  .h2-visuel img{border-radius:0 0 28px 28px; box-shadow:none}
  .h2-heros .h2-manuscrit{left:auto; right:1rem; bottom:-1.1rem; font-size:1.7rem; padding:.4rem .9rem .3rem}
  .h2-slogan{font-size:clamp(2.35rem,10.5vw,2.9rem)}
  .h2-chapeau{font-size:1rem; margin-bottom:1.1rem}
  .preuves3--heros{padding:.9rem 0; margin-bottom:1.3rem}
  .preuve3-ico{width:38px; height:38px}
  .preuve3-ico svg{width:21px; height:21px}
  .h2-cta .bouton{flex:1 1 100%}
  .h2-recherche{margin-top:0}
  .h2-recherche-boite{border-radius:22px; padding:1.3rem 1.1rem; box-shadow:var(--ombre-2)}
  .h2-recherche .moteur--heros{grid-template-columns:1fr 1fr; gap:.65rem}
  .h2-recherche .moteur--heros .champ label{white-space:normal}
  .h2-section{padding:3.4rem 0}
  .h2-tete{margin-bottom:2rem}
  .h2-etapes{grid-template-columns:1fr; row-gap:1.4rem}
  .h2-etapes li{display:grid; grid-template-columns:64px 1fr; column-gap:1rem; text-align:left; align-items:start; padding:0}
  .h2-etape-ico{width:64px; height:64px; grid-row:span 3; margin:0}
  .h2-etapes b{font-size:1.2rem; margin:0}
  .h2-profils-grille{grid-template-columns:1fr}
  .h2-profil-visuel{height:100px}
  .h2-sim-boite{grid-template-columns:1fr; padding:1.4rem 1.1rem; gap:1.2rem}
  .h2-sim-effort b{font-size:2.2rem}
  .lots--4,.lots--6{grid-template-columns:1fr}
  .h2-editorial .guides{grid-template-columns:1fr}
  .h2-confiance dt{font-size:1.7rem}
  .h2-fin{padding:3.2rem 0}
  .h2-fin .h2-cta .bouton{flex:1 1 100%}
}
@media (max-width:380px){ .h2-recherche .moteur--heros{grid-template-columns:1fr} }

/* garde-fous anti-débordement (grilles + champs multi-choix) */
.h2-recherche-boite > *,.h2-recherche .moteur--heros > *,.h2-heros-grille > *,.h2-sim-boite > *{min-width:0}
.h2-recherche .multi-bouton{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.h2-profil-corps{padding-top:2.6rem}

/* ==========================================================================
   V2.0.2 — slogan sur 2 lignes exactes, espacements resserrés
   ========================================================================== */
.h2-heros-texte{container-type:inline-size}
.h2-slogan{font-size:clamp(2.1rem,4.4vw,4.1rem); font-size:clamp(2.1rem,min(4.4vw,10cqi),4.1rem)}
.h2-slogan em{white-space:nowrap}
/* espacements entre rubriques : -35 % */
.h2-section{padding:3.4rem 0}
.h2-parcours{padding-top:3rem}
.h2-selection{padding-top:2.4rem}
.h2-tete{margin-bottom:2rem}
.h2-centre{margin:1.8rem 0 0}
.h2-recherche{padding-bottom:0}
.h2-fin{padding:3.6rem 0}
@media (max-width:760px){
  .h2-section{padding:2.5rem 0}
  .h2-tete{margin-bottom:1.5rem}
  .h2-slogan{font-size:clamp(1.9rem,10cqi,2.9rem)}
}
/* dossier de reference : illustration en haut de la carte (V2.0.2) */
.h2-editorial .guide--pilier{justify-content:space-between; gap:.4rem}
.guide-illus{width:100%; max-width:440px; height:auto; margin:0 auto .8rem; display:block}
@media (max-width:760px){ .guide-illus{max-width:300px} }
/* V2.0.2 : la colonne de texte du heros prend toujours toute la largeur disponible
   (indispensable avec container-type, sinon elle s'ecrase a 0 px dans une mise en page centree) */
.h2-heros-texte{width:100%; min-width:0; align-self:stretch}
@media (max-width:760px){
  .h2-heros .h2-manuscrit{font-size:1.5rem; padding:.45rem .9rem .35rem}
  .h2-surtitre{letter-spacing:.12em}
}

/* V2.0.3 : fin de l'arche — cadre rectangulaire adouci + filet decale (photo de l'accueil) */
.h2-visuel{isolation:isolate}
.h2-visuel::before{content:none !important}
.h2-visuel img{border-radius:26px !important}
.h2-heros .h2-manuscrit{left:-2.4rem; bottom:2.2rem}
@media (max-width:760px){
  .h2-visuel::before{display:none}
  .h2-visuel img{border-radius:0 0 26px 26px !important}
}
/* V2.0.3 : schema au trait dans le bandeau de chaque profil (une couleur, version foncee) */
.h2-profil-visuel{position:relative}
.h2-profil-schema{position:absolute; right:6%; top:50%; transform:translateY(-54%); width:min(64%,250px); line-height:0; pointer-events:none}
.h2-profil-schema svg{width:100%; height:auto; display:block}
.h2-profil--securite .h2-profil-schema{color:#2F5C45}
.h2-profil--equilibre .h2-profil-schema{color:#2F587A}
.h2-profil--dynamique .h2-profil-schema{color:#8E4A2A}
@media (max-width:760px){ .h2-profil-schema{width:min(58%,210px)} }
/* V2.0.3 : espaces resserres sous « Trouver mon profil » et au-dessus de « Nos coups de cœur » */
.h2-profils{padding-bottom:2.2rem}
.h2-profils .h2-centre{margin-top:1.6rem; margin-bottom:0}
.h2-sim{padding-top:1.4rem; padding-bottom:1.4rem}
.h2-selection{padding-top:1.6rem}
@media (max-width:760px){ .h2-profils{padding-bottom:1.6rem} .h2-sim{padding-top:1rem; padding-bottom:1rem} .h2-selection{padding-top:1.2rem} }
/* la zone tactile elargie (bordures transparentes) ne doit pas etre coloree : piste fine */
.h2-sim-champ input[type=range]{background-clip:content-box !important; height:8px; border-top:15px solid transparent; border-bottom:15px solid transparent; box-sizing:content-box}

/* ==========================================================================
   V2.0.5 — 3 ajustements mobiles (retours d'Antoine, iPhone)
   ========================================================================== */
@media (max-width:760px){
  /* 1. note manuscrite : une petite etiquette en bas a droite de la photo (la regle ordinateur
        « left:-2.4rem » s'ajoutait a « right:1rem » et etirait la note sur toute la largeur) */
  .h2-heros .h2-manuscrit{left:auto !important; right:.9rem; bottom:-.9rem; width:auto; max-width:70%; font-size:1.9rem; line-height:1; padding:.45rem .9rem .35rem; transform:rotate(-4deg); white-space:nowrap}
  .h2-visuel{margin-bottom:.9rem}
  /* 2. parcours en 4 etapes : le numero devient une pastille posee sur le pictogramme */
  .h2-etapes li{position:relative}
  .h2-etapes b{position:absolute; left:44px; top:-4px; width:26px; height:26px; border-radius:50%; background:var(--terracotta); color:#fff; font:700 .8rem/26px var(--corps); text-align:center; margin:0; box-shadow:0 0 0 3px var(--ivoire)}
  .h2-etapes h3{margin-top:.15rem}
}
@media (max-width:760px){
  /* la regle de lisibilite des legendes (figcaption, 11,5 px) ne doit pas s'appliquer a la note manuscrite */
  .h2-heros figcaption.h2-manuscrit{font-size:1.9rem !important}
}