/* ==========================================================================
   ACCUEIL (FR) — refonte du 16/10/2026
   Feuille propre à la page d'accueil française, chargée par index.php ($page_css,
   includes/header.php) après app.css et app-mobile.css. Classes préfixées hp- :
   les composants communs (.hero, .steps, .figure, .compare, .cabinet-values,
   .update-note, .trust-strip) gardent leur style ailleurs, y compris sur les
   accueils traduits. Version dans l'URL (?v=) : à changer à chaque modification.
   --------------------------------------------------------------------------
   01. Héros + estimateur      05. Méthode / Le cabinet (photo + texte)
   02. Pourquoi l'Andorre      06. Comparatif, manifeste, gestoria
   03. Services                07. FAQ (titre à gauche, questions à droite)
   04. Rythme des sections     08. Responsive
   ========================================================================== */

/* 01 — HÉROS : promesse à gauche, estimateur à droite ======================= */
.hp-hero .hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;min-height:0;
  padding-block:clamp(2.4rem,1.6rem + 2.4vw,3.6rem)}
.hp-hero .hero__content{max-width:44rem}
.hp-hero h1{font-size:clamp(2.05rem,1.3rem + 2.3vw,3.15rem)}

.hp-est{position:relative;min-width:0;padding:clamp(1.1rem,.8rem + 1vw,1.55rem);border-radius:var(--r-lg);color:var(--text-on-dark);
  background:rgba(10,18,27,.68);border:1px solid rgba(255,255,255,.16);box-shadow:var(--sh-lg);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
.hp-est__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.hp-est__t{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)}
.hp-est__modes{display:flex;gap:.2rem;padding:.2rem;border-radius:var(--r-pill);background:rgba(255,255,255,.08)}
.hp-est__modes button{min-height:34px;padding:.25rem .85rem;border-radius:var(--r-pill);font-size:.8rem;font-weight:600;color:var(--text-on-dark-soft);transition:background .2s var(--ease),color .2s var(--ease)}
.hp-est__modes button:hover{color:#fff}
.hp-est__modes button[aria-selected="true"]{background:#fff;color:var(--ink-900)}
.hp-est__modes button:focus-visible{outline:2px solid var(--gold-400);outline-offset:2px}
.hp-est__l{display:block;margin-top:1rem;font-size:.88rem;font-weight:600;color:#fff}
.hp-est__in{position:relative;margin-top:.45rem}
.hp-est__in input{width:100%;padding:.5rem 2.7rem .5rem .95rem;border:0;border-radius:12px;background:#fff;
  font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,1.3rem + .9vw,2rem);line-height:1.1;color:var(--ink-900)}
.hp-est__in input:focus{outline:0;box-shadow:0 0 0 4px rgba(214,189,132,.45)}
.hp-est__in span{position:absolute;right:.95rem;top:50%;transform:translateY(-50%);font-family:var(--serif);font-size:1.35rem;color:var(--text-mute);pointer-events:none}
.hp-est__chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin-top:.55rem}
.hp-est__chips button{min-height:34px;padding:.2rem;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);font-size:.8rem;font-weight:600;color:var(--text-on-dark-soft);white-space:nowrap;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.hp-est__chips button:hover{border-color:var(--gold-400);color:#fff}
.hp-est__chips button[aria-pressed="true"]{background:rgba(214,189,132,.18);border-color:var(--gold-400);color:#fff}
.hp-est__chips button:focus-visible{outline:2px solid var(--gold-400);outline-offset:2px}
.hp-est__bars{display:grid;gap:.6rem;margin-top:1.05rem}
.hp-est__bar{display:grid;grid-template-columns:5.6rem minmax(0,1fr) auto;align-items:center;column-gap:.8rem}
.hp-est__bar dt{grid-column:1;grid-row:1;display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--text-on-dark-soft)}
.hp-est__bar dt img{width:18px;height:13px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.hp-est__bar::after{content:"";grid-column:2;grid-row:1;width:var(--w,0%);height:10px;border-radius:0 5px 5px 0;background:#93a5b6;transition:width .5s var(--ease-out)}
.hp-est__bar.is-andorre::after{background:var(--gold-400)}
.hp-est__bar.is-andorre dt{color:#fff;font-weight:600}
.hp-est__bar dd{grid-column:3;grid-row:1;font-weight:700;font-size:.95rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.hp-est__save{display:grid;gap:.1rem;margin-top:1.05rem;padding:.8rem .95rem .85rem;border-radius:12px;background:rgba(214,189,132,.12);border:1px solid rgba(214,189,132,.3)}
.hp-est__save span{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-400)}
.hp-est__save b{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,1.35rem + 1vw,2.15rem);line-height:1.05;color:#fff}
.hp-est__save small{font-size:.8rem;color:var(--text-on-dark-soft)}
.hp-est__more{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;margin-top:.6rem;font-weight:600;font-size:.88rem;color:var(--gold-300);transition:color .2s var(--ease)}
.hp-est__more svg{width:1rem;height:1rem;transition:transform .3s var(--ease)}
.hp-est__more:hover{color:#fff}
.hp-est__more:hover svg{transform:translateX(3px)}
.hp-est__disc{margin-top:.2rem;font-size:.75rem;line-height:1.45;color:rgba(182,196,208,.85)}
html:not(.js) .hp-est__modes,html:not(.js) .hp-est__chips{display:none}

/* 02 — POURQUOI L'ANDORRE : chiffres clés à gauche, six atouts en liste à droite */
.hp-why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.hp-why__head h2,.hp-split__body h2,.hp-cmp__head h2,.hp-gest__head h2,.hp-law h2,.hp-faq__head h2{margin-top:1rem}
.hp-why__head .lead,.hp-split__body .lead,.hp-cmp__head .lead{margin-top:1rem}
.hp-figs{margin-top:1.6rem;padding:1.05rem 1.05rem 1.1rem;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--ink-700),var(--ink-900));box-shadow:var(--sh)}
.hp-figs__t{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)}
.hp-figs__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:.85rem;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.hp-figs__grid>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.35rem;padding:.85rem 1rem;background:var(--ink-800)}
.hp-figs dd{font-family:var(--serif);font-weight:500;font-size:1.85rem;line-height:1;color:#fff}
.hp-figs dd i{margin-left:.05em;font-style:normal;font-family:var(--sans);font-weight:700;font-size:.5em;vertical-align:.25em;color:var(--gold-400)}
.hp-figs dt{font-size:.78rem;line-height:1.3;color:var(--text-on-dark-soft)}
.hp-why__list{border-top:1px solid var(--line-strong)}
.hp-why__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1.05rem .15rem;border-bottom:1px solid var(--line)}
.hp-why__ic{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:11px;background:var(--gold-100);border:1px solid var(--gold-200);color:var(--gold-700)}
.hp-why__ic svg{width:1.2rem;height:1.2rem}
.hp-why__list h3{font-size:1.1rem;font-weight:600;line-height:1.3;color:var(--ink-800)}
.hp-why__list p{margin-top:.2rem;font-size:.96rem;line-height:1.55;color:var(--text-soft)}

/* 03 — SERVICES : un seul bloc, deux colonnes de lignes cliquables ============ */
.hp-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(1.6rem,1.2rem + 1.2vw,2.3rem);
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden}
.hp-svc__it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:clamp(1.05rem,.85rem + .6vw,1.4rem) clamp(1.1rem,.8rem + 1vw,1.6rem);
  color:inherit;text-decoration:none;border-top:1px solid var(--line);transition:background .25s var(--ease)}
.hp-svc__it:nth-child(-n+2){border-top:0}
.hp-svc__it:nth-child(2n){border-inline-start:1px solid var(--line)}
.hp-svc__it:hover{background:#fffdf8}
.hp-svc__it:focus-visible{outline:2px solid var(--gold-500);outline-offset:-3px}
.hp-svc__ic{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:11px;background:var(--ink-800);color:#fff;transition:background .25s var(--ease),color .25s var(--ease)}
.hp-svc__ic svg{width:1.2rem;height:1.2rem}
.hp-svc__tx{min-width:0}
.hp-svc__it h3{font-size:1.08rem;font-weight:600;line-height:1.3;color:var(--ink-800);transition:color .25s var(--ease)}
.hp-svc__it p{margin-top:.2rem;font-size:.93rem;line-height:1.5;color:var(--text-soft)}
.hp-svc__it>.arr{width:1.1rem;height:1.1rem;color:var(--gold-600);transition:transform .3s var(--ease)}
.hp-svc__it:hover h3{color:var(--gold-700)}
.hp-svc__it:hover .hp-svc__ic{background:linear-gradient(180deg,var(--gold-400),var(--gold-500));color:var(--ink-900)}
.hp-svc__it:hover>.arr{transform:translateX(4px)}
.hp-cta-row{margin-top:clamp(1.4rem,1rem + 1vw,2rem);text-align:center}

/* 04 — RYTHME DES SECTIONS ================================================== */
.hp-sec{padding-block:clamp(2.8rem,1.9rem + 3vw,4.6rem)}

/* 05 — MÉTHODE / LE CABINET : photo à hauteur raisonnable, texte à côté ======= */
.hp-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.hp-split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.hp-split--rev .hp-split__media{order:2}
.hp-split__media .figure img{width:100%;aspect-ratio:4/5;max-height:620px;object-fit:cover}
.hp-split__body .steps{margin-top:clamp(1.5rem,1.1rem + 1vw,2.1rem)}
.hp-split__body .cabinet-values{margin-top:clamp(1.3rem,1rem + .8vw,1.8rem)}
.hp-split__body .btn-row{margin-top:1.5rem}

/* 06 — COMPARATIF, MANIFESTE, GESTORIA : titre et texte à gauche, contenu à droite */
.hp-cmp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.hp-cmp__tools{margin-top:1.3rem;line-height:1.6;color:var(--text-soft)}
.hp-cmp__head .btn-row{margin-top:1.1rem}
.hp-cmp__table{min-width:0}
/* Tableau propre à l'accueil (pas de classe .compare : il reste un vrai tableau à 3 colonnes sur téléphone,
   au lieu des cartes empilées qu'app-mobile.js applique aux tableaux .compare) */
.hp-tbl-box{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-card);box-shadow:var(--sh-sm)}
.hp-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.hp-tbl th,.hp-tbl td{padding:1rem 1.35rem;text-align:left;vertical-align:middle;border-top:1px solid var(--line);overflow-wrap:break-word}
.hp-tbl thead th{border-top:0;padding-block:.95rem;background:var(--paper-200);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.hp-tbl thead th:first-child{width:40%}
.hp-tbl thead th.is-andorre{background:var(--ink-800);color:var(--gold-400)}
.hp-tbl__k{display:block}
.hp-tbl__v{display:block;margin-top:.1rem;font-family:var(--serif);font-size:1.05rem;font-weight:500;letter-spacing:-.01em;text-transform:none;color:#fff}
.hp-tbl tbody th{font-weight:600;font-size:.97rem;line-height:1.4;color:var(--text)}
.hp-tbl td{font-size:1rem;line-height:1.45;color:var(--text-soft)}
.hp-tbl td.is-andorre{background:rgba(194,161,95,.10);font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--ink-900)}
.hp-tbl tbody tr:hover>*{background-color:rgba(255,255,255,.55)}
.hp-tbl tbody tr:hover>td.is-andorre{background-color:rgba(194,161,95,.16)}
.hp-tbl tfoot td{padding-block:.85rem;font-size:.82rem;line-height:1.5;color:var(--text-mute);background:var(--paper-200)}
.hp-law__in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.hp-law h2{font-size:clamp(1.9rem,1.35rem + 1.9vw,2.85rem);line-height:1.08}
.hp-law h2 em{font-style:italic;color:var(--gold-300)}
.hp-law .lead{color:var(--text-on-dark-soft)}
.hp-law .update-note{margin-top:1.4rem;background:rgba(214,189,132,.08);border-color:rgba(214,189,132,.3)}
.hp-law .update-note p{color:var(--text-on-dark)}
.hp-law .update-note strong{color:#fff}
.hp-gest{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.6rem,1rem + 3vw,4rem);align-items:center}
.hp-gest__body .btn-row{margin-top:1.3rem}

/* 07 — FAQ : titre à gauche (collant au format bureau), questions à droite ==== */
.hp-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.hp-faq__head{position:sticky;top:calc(72px + 2rem)}
.hp-faq__head h2{font-size:clamp(1.75rem,1.3rem + 1.5vw,2.35rem)}
.hp-ask{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;margin-top:1.1rem;font-weight:700;color:var(--gold-700);transition:color .2s var(--ease)}
.hp-ask svg{width:1rem;height:1rem;transition:transform .3s var(--ease)}
.hp-ask:hover{color:var(--ink-800)}
.hp-ask:hover svg{transform:translateX(3px)}
.hp-acc{border-top:1px solid var(--line-strong)}
.hp-acc__item{border-bottom:1px solid var(--line-strong)}
.hp-acc__item>summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:60px;padding:1.1rem .15rem;list-style:none;cursor:pointer;
  font-family:var(--serif);font-weight:500;font-size:clamp(1.06rem,1rem + .3vw,1.2rem);line-height:1.35;color:var(--ink-800);transition:color .2s var(--ease)}
.hp-acc__item>summary::-webkit-details-marker{display:none}
.hp-acc__item>summary:hover{color:var(--gold-700)}
.hp-acc__item>summary:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px;border-radius:6px}
.hp-acc__item .chev{flex:0 0 auto;width:1.3rem;height:1.3rem;color:var(--gold-600);transition:transform .35s var(--ease)}
.hp-acc__item[open] .chev{transform:rotate(180deg)}
.hp-acc__a{max-width:46rem;padding:0 .15rem 1.35rem}
.hp-acc__a p{font-size:1rem;line-height:1.7;color:var(--text-soft)}
.hp-acc__a strong{color:var(--text)}
.hp-acc__a a{color:var(--gold-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* 08 — RESPONSIVE ========================================================== */
@media (max-width:999px){
  .hp-why,.hp-split,.hp-split--rev,.hp-cmp,.hp-law__in,.hp-gest,.hp-faq{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .hp-split--rev .hp-split__media{order:0}
  .hp-split__media .figure img{aspect-ratio:16/10;max-height:400px}
  .hp-faq__head{position:static;max-width:44rem}
  .hp-why__head,.hp-cmp__head,.hp-gest__head,.hp-law__head{max-width:46rem}
}
@media (max-width:980px){
  .hp-hero .hero__inner{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .hp-est{max-width:34rem}
}
@media (max-width:760px){
  .hp-svc{grid-template-columns:minmax(0,1fr)}
  .hp-svc__it:nth-child(2){border-top:1px solid var(--line)}
  .hp-svc__it:nth-child(2n){border-inline-start:0}
}
@media (max-width:640px){
  .hp-hero .hero__inner{padding-block:1.9rem 2rem;gap:1.3rem}
  .hp-hero h1{font-size:clamp(1.75rem,1.1rem + 3.2vw,2.2rem)}
  /* Deux boutons côte à côte (ils passent l'un sous l'autre s'ils ne tiennent pas) */
  .hp-hero .hero__cta{gap:.5rem}
  .hp-hero .hero__cta .btn{flex:1 1 auto;padding:.85rem .75rem;gap:.45rem;font-size:.94rem;white-space:nowrap}
  /* Estimateur : titre puis onglets pleine largeur, économie sur une ligne */
  .hp-est{padding:1rem .95rem 1.05rem}
  .hp-est__head{flex-wrap:wrap;gap:.6rem}
  .hp-est__modes{flex:1 1 100%}
  .hp-est__modes button{flex:1 1 0;min-height:40px}
  .hp-est__l{margin-top:.85rem}
  .hp-est__chips button{min-height:40px}
  .hp-est__bar{grid-template-columns:5.2rem minmax(0,1fr) auto;column-gap:.65rem}
  .hp-est__save{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.8rem}
  .hp-est__save span{grid-column:1;grid-row:1}
  .hp-est__save small{grid-column:1;grid-row:2}
  .hp-est__save b{grid-column:2;grid-row:1/3;font-size:1.65rem}
  /* Méthode : photo décorative retirée sur téléphone (les étapes suffisent, défilement réduit) */
  #methode .hp-split__media{display:none}
  /* Comparatif : boutons côte à côte, tableau compact à 3 colonnes */
  .hp-cmp__head .btn-row{gap:.5rem}
  .hp-cmp__head .btn-row .btn{flex:1 1 auto;padding:.8rem .7rem;font-size:.88rem;white-space:nowrap}
  .hp-cmp__head .btn-row .btn .arr{display:none}
  .hp-tbl th,.hp-tbl td{padding:.72rem .7rem;-webkit-hyphens:auto;hyphens:auto}
  .hp-tbl thead th{font-size:.75rem;letter-spacing:.03em}
  .hp-tbl thead th:first-child{width:37%}
  .hp-tbl thead th:last-child{width:28%}
  .hp-tbl__k{display:none}
  .hp-tbl__v{margin-top:0;font-size:.98rem}
  .hp-tbl tbody th{font-size:.88rem;line-height:1.35}
  .hp-tbl td{font-size:.88rem;line-height:1.38}
  .hp-tbl td.is-andorre{font-size:1rem}
  .hp-tbl tfoot td{font-size:.76rem}
  .hp-sec{padding-block:2.6rem}
  .hp-figs dd{font-size:1.6rem}
  .hp-figs__grid>div{padding:.75rem .8rem}
  .hp-why__list li{padding-block:.9rem;gap:.85rem}
  .hp-why__list h3{font-size:1.04rem}
  .hp-why__list p{font-size:.93rem}
  .hp-svc__it{padding:1rem 1.05rem;gap:.85rem;align-items:start}
  .hp-svc__it>.arr{align-self:center}
  .hp-split__media .figure img{max-height:300px}
  .hp-acc__item>summary{padding-block:1rem;font-size:1.04rem}
  .hp-acc__a a{display:inline-block;padding:.35em 0}
}
@media print{
  .hp-est__modes,.hp-est__chips,.hp-est__more{display:none!important}
}