/* ==========================================================================
   UX SITE — revue page par page du 16/10/2026
   Feuille commune à toutes les pages et à toutes les langues, chargée par
   includes/header.php après app.css et app-mobile.css (et avant les feuilles
   propres à une page, $page_css). Version : $ux_ver de header.php.
   Les règles s'appuient sur les motifs de mise en page existants (inventaire du
   16/10/2026), avec :has() — sans lui (navigateurs anciens), la page garde
   simplement sa mise en page d'origine. Seules classes ajoutées : ux-full dans le
   HTML (sections à tableau long) et tb-compact, posée par app-mobile.js.
   Noms de classe : vérifiés contre les règles génériques des bloqueurs de
   publicité (EasyList, Liste FR, Fanboy, uBlock, AdGuard).
   --------------------------------------------------------------------------
   01. Rythme vertical                    09. Micro-libellés ≥ 12 px
   02. Héros des pages intérieures        10. Téléphone : premiers écrans compacts
   03. Sections « titre à gauche »        11. Sources officielles
   04. FAQ en liste                       12. Conteneurs imbriqués
   05. Bandeaux d'appel compacts          13. Cartes « atouts » en liste (PC)
   06. Photos des sections texte + photo  14. Cartes « atouts » en liste (téléphone)
   07. Tableaux compacts sur téléphone    15. « En bref » à filets
   08. RTL (arabe)                        16. Cibles d'au moins 24 px
   ========================================================================== */

/* 01 — RYTHME VERTICAL : sections moins hautes (≈ 76 px au lieu de 100 px sur PC) */
:root{--section-y:clamp(3rem,2.1rem + 3vw,4.75rem)}
@media (max-width:640px){:root{--section-y:2.75rem}}

/* 02 — HÉROS DES PAGES INTÉRIEURES : hauteur dictée par le contenu (plus de hauteur minimale) */
.hero--page .hero__inner{min-height:0;padding-block:clamp(2.4rem,1.6rem + 2.4vw,3.6rem)}

/* 03 — SECTIONS « TITRE À GAUCHE » (PC ≥ 1100 px)
   Motif : .section > .container.narrow > .section-head.center suivi d'un contenu (FAQ, étapes,
   tableau, listes, encadrés), sauf si la section contient un tableau de 4 colonnes ou plus, ou un tableau
   à cellules longues (classe ux-full posée dans le HTML le 16/10/2026) : ces tableaux gardent toute la largeur. Le titre passe dans une colonne de gauche qui reste visible au
   défilement, le contenu occupe la colonne de droite : toute la largeur est utilisée et la
   section perd la hauteur du titre. Mise en page par flottant (et non par grille) : une grille
   répartirait la hauteur du titre entre les blocs de droite et les écarterait. */
@media (min-width:1100px){
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4))){
    --ux-col:34%;--ux-gap:clamp(2.5rem,1rem + 4vw,5rem);
    max-width:var(--container);display:flow-root}
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4)))>.section-head{
    float:left;width:var(--ux-col);max-width:none;margin:0;text-align:start!important;position:sticky;top:calc(72px + 2rem)}
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4)))>:not(.section-head){
    margin-inline-start:calc(var(--ux-col) + var(--ux-gap))!important}   /* !important : notes avec margin-inline:auto en style inline */
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4)))>.section-head+*{margin-top:0!important}
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4)))>.section-head .eyebrow--center{justify-content:flex-start}
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4)))>.section-head h2{font-size:clamp(1.7rem,1.2rem + 1.4vw,2.3rem)}
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4)))>.section-head h2 br{display:none}  /* chaque <br> de h2 est précédé d'une espace (16/10/2026) */
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4)))>.section-head .lead{font-size:1.06rem;line-height:1.6}
  /* notes centrées sous le contenu : alignées sur la colonne de droite */
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4)))>p.center{text-align:start;max-width:none!important;margin-inline-end:0!important}
}
@media (min-width:1100px) and (max-width:1279px){
  /* colonne de droite plus étroite : les paires de cartes « Vous / Nous » passent l'une sous l'autre */
  .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4))) .provide-grid{grid-template-columns:minmax(0,1fr)}
}

/* 04 — FAQ EN LISTE : questions séparées par des filets (plus de cartes), toutes largeurs */
.faq{gap:0;border-top:1px solid var(--line-strong)}
.faq__item{background:none;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;box-shadow:none}
.faq__item[open]{border-color:var(--line-strong);box-shadow:none}
.faq__item summary{min-height:60px;padding:1.1rem .15rem;font-size:clamp(1.04rem,1rem + .3vw,1.18rem);line-height:1.35;transition:color .2s var(--ease)}
.faq__item summary:hover{color:var(--gold-700)}
.faq__item summary:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px;border-radius:6px}
.faq__answer{padding:0 .15rem 1.35rem}
.faq__answer p{max-width:46rem}
@media (max-width:640px){
  .faq{gap:0}
  .faq__item summary{padding:1rem .1rem;font-size:1.02rem}
  .faq__answer{padding:0 .1rem 1.15rem}
}

/* 05 — BANDEAUX D'APPEL COMPACTS
   Motif : .section > .container.narrow.center (sans .section-head) qui contient un titre et un bouton.
   PC : texte à gauche, bouton à droite, section moins haute ; ils précèdent le bandeau du pied de page. */
.section:has(>.container.narrow.center>h2):has(>.container.narrow.center>.btn){padding-block:clamp(2.4rem,1.8rem + 2vw,3.4rem)}
@media (min-width:1100px){
  .section>.container.narrow.center:has(>h2):has(>.btn,>.btn-row){
    max-width:var(--container);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3rem;align-items:center;text-align:start!important}
  .section>.container.narrow.center:has(>h2):has(>.btn,>.btn-row)>*{grid-column:1;margin-inline:0!important;max-width:52rem!important}
  .section>.container.narrow.center:has(>h2):has(>.btn,>.btn-row)>.eyebrow{justify-content:flex-start}
  .section>.container.narrow.center:has(>h2):has(>.btn,>.btn-row)>h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.15rem)}
  .section>.container.narrow.center:has(>h2):has(>.btn,>.btn-row)>.lead{margin-top:.6rem!important}
  .section>.container.narrow.center:has(>h2):has(>.btn,>.btn-row)>:is(.btn,.btn-row){
    grid-column:2;grid-row:1/span 4;align-self:center;justify-self:end;justify-content:flex-end;margin:0!important;max-width:none}
}

/* 06 — PHOTOS DES SECTIONS TEXTE + PHOTO : hauteur bornée (les portraits 3:4 dépassaient 800 px) */
.split__media .figure img{max-height:min(600px,80vh);object-fit:cover}
@media (max-width:980px){.split__media .figure img{max-height:340px}}
@media (max-width:640px){.split__media .figure img{max-height:250px}}

/* 07 — TABLEAUX COMPACTS SUR TÉLÉPHONE
   app-mobile.js garde en vrai tableau (classe tb-compact) les tableaux de 3 colonnes aux cellules
   courtes, au lieu de les transformer en cartes empilées : lecture ligne à ligne, deux fois moins haut. */
@media (max-width:640px){
  .tscroll.tb-compact{overflow:visible}
  .tscroll.tb-compact::before{display:none!important}
  table.compare.tb-compact{min-width:0!important;table-layout:fixed}
  .compare.tb-compact th,.compare.tb-compact td{padding:.72rem .65rem;font-size:.88rem;line-height:1.38;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  .compare.tb-compact thead th{font-size:.66rem;letter-spacing:.05em}
  .compare.tb-compact th:first-child,.compare.tb-compact td:first-child{width:38%}
  .compare.tb-compact thead th.col-andorre span{font-size:.94rem}
  .compare.tb-compact .big{font-size:1rem}
  .compare.tb-compact tfoot td{font-size:.76rem}
}

/* 08 — RTL (arabe) : colonne de titre à droite, contenu à gauche */
@media (min-width:1100px){
  html[dir="rtl"] .section>.container.narrow:not(.ux-full):has(>.section-head.center:first-child+*):not(:has(table tr>:nth-child(4)))>.section-head{float:right}
}

/* 09 — MICRO-LIBELLÉS ≥ 12 px (lisibilité ; les étiquettes en capitales espacées descendaient à 10-11 px) */
.provide-card__badge,.hero__panel-label,.guide-card__cap,.gfilter__n,.footer-cities__label,.lgl-docs__t,
.nav__mega .mega__grouplabel,.nav__drop>.mega__grouplabel,.cp-meta strong,.ctc-line__t b,.ctc-cc,.ctc-facts dt,.sim-pin__l{font-size:.75rem}
.compare thead th{font-size:.75rem}
@media (max-width:980px){.trust-item strong{font-size:.8rem}}
@media (max-width:640px){
  .tb-cards>tbody>tr>td::before,.tb-cards.tb-cols3>tbody>tr>td::before{font-size:.75rem}
  .compare.tb-compact thead th{font-size:.75rem;letter-spacing:.03em}
}

/* 10 — TÉLÉPHONE : PREMIERS ÉCRANS PLUS COMPACTS */
@media (max-width:640px){
  /* Héros : les deux boutons côte à côte quand ils tiennent (sinon l'un sous l'autre, pleine largeur) */
  .hero__cta{gap:.5rem}
  .hero__cta .btn{flex:1 1 auto;padding:.85rem .75rem;gap:.45rem;font-size:.94rem;white-space:nowrap}
  /* « En bref » : liste à filets au lieu d'une carte par point (même contenu, ≈ 30 % moins haut) */
  .keyfacts{gap:.55rem}
  .keyfacts ul{gap:0}
  .keyfacts ul li{padding:.7rem 0;background:none;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;font-size:.95rem;line-height:1.55}
  .keyfacts ul li:first-child{border-top:0;padding-top:.15rem}
  .keyfacts .keyfacts__src{padding-top:.7rem;font-size:.8rem}
  /* Cartes d'atouts et de formules : rembourrage réduit */
  .type-card{padding:1.1rem 1.1rem 1.15rem}
  .type-card__cap{margin-bottom:.7rem}
  .type-grid{gap:.6rem}
}
/* Liens dans les en-têtes de ligne des tableaux : cible d'au moins 24 px de haut */
.compare th a{display:inline-block;padding-block:.2rem}

/* 11 — SOURCES OFFICIELLES : alignées sur la largeur du contenu, liste sur deux colonnes au format bureau */
@media (min-width:1100px){
  .sources-sec>.container.narrow{max-width:var(--container)}
  .sources-box__list{display:block;columns:2;column-gap:3rem}
  .sources-box__list li{break-inside:avoid;margin-bottom:.4rem}
}

/* 12 — CONTENEUR DANS UN CONTENEUR : pas de double marge latérale (ex. étapes de la page Traders sur téléphone) */
.container .container{padding-inline:0}

/* 13 — GRILLES DE CARTES « ATOUTS / FORMULES » (PC ≥ 1100 px)
   Motif : .section > .container > .section-head.center suivi d'une .type-grid. Comme les sections
   « titre à gauche » : titre collant à gauche, cartes converties en liste à filets à droite
   (étiquette chiffrée dans une colonne, titre + texte dans l'autre). Moins de colonnes, lecture linéaire. */
@media (min-width:1100px){
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid){
    --ux-col:34%;--ux-gap:clamp(2.5rem,1rem + 4vw,5rem);display:flow-root}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.section-head{
    float:left;width:var(--ux-col);max-width:none;margin:0;text-align:start!important;position:sticky;top:calc(72px + 2rem)}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.section-head .eyebrow--center{justify-content:flex-start}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.section-head h2{font-size:clamp(1.7rem,1.2rem + 1.4vw,2.3rem)}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.section-head h2 br{display:none}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.section-head .lead{font-size:1.06rem;line-height:1.6}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>:not(.section-head){
    margin-inline-start:calc(var(--ux-col) + var(--ux-gap))!important;margin-inline-end:0!important;max-width:none!important}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.type-grid{
    margin-top:0!important;grid-template-columns:minmax(0,1fr)!important;gap:0;border-top:1px solid var(--line-strong)}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>p.center{text-align:start}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card{
    display:grid;grid-template-columns:7.5rem minmax(0,1fr);column-gap:1.4rem;align-items:start;
    padding:1.15rem .15rem;background:none;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;box-shadow:none}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card>*{grid-column:2}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card>.type-card__cap{grid-column:1;grid-row:1/span 4;justify-self:start;margin:.1rem 0 0}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card>p{margin-top:.3rem}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card>.type-for{margin-top:.5rem}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.type-grid>a.type-card:hover h3{color:var(--gold-700)}
  .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.type-grid>a.type-card:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;border-radius:6px}
}
@media (min-width:1100px){
  html[dir="rtl"] .section>.container:not(.narrow):has(>.section-head.center:first-child+.type-grid)>.section-head{float:right}
}

/* 14 — TÉLÉPHONE : CARTES « ATOUTS / FORMULES » EN LISTE À FILETS
   Même lecture que sur PC (§ 13) : plus de cadre ni d'ombre autour de chaque carte, un filet entre
   les éléments ; l'étiquette chiffrée reste au-dessus du titre. Même contenu, nettement moins haut. */
@media (max-width:640px){
  .section>.container:has(>.section-head.center:first-child+.type-grid)>.type-grid{gap:0;border-top:1px solid var(--line-strong)}
  .section>.container:has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card{
    padding:1rem .1rem 1.05rem;background:none;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;box-shadow:none}
  .section>.container:has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card:active{transform:none;background:rgba(255,255,255,.4)}
  .section>.container:has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card>.type-card__cap{margin-bottom:.55rem}
  .section>.container:has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card>p{margin-top:.35rem}
  .section>.container:has(>.section-head.center:first-child+.type-grid)>.type-grid>.type-card>.type-for{margin-top:.55rem}
}
/* Liste : les cartes cliquables gardent un repère de lien (flèche dorée après le titre) */
@media (min-width:1100px),(max-width:640px){
  .section>.container:has(>.section-head.center:first-child+.type-grid)>.type-grid>a.type-card h3::after{
    content:"";display:inline-block;width:.85em;height:.85em;margin-inline-start:.45rem;vertical-align:-.06em;background:var(--gold-600);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:transform .3s var(--ease)}
  .section>.container:has(>.section-head.center:first-child+.type-grid)>.type-grid>a.type-card:hover h3::after{transform:translateX(3px)}
  html[dir="rtl"] .section>.container:has(>.section-head.center:first-child+.type-grid)>.type-grid>a.type-card h3::after{transform:scaleX(-1)}
}

/* 15 — « EN BREF » (PC et tablette) : points séparés par des filets au lieu d'une case par point
   (moins de cadres imbriqués dans le bloc sombre, même hauteur) */
@media (min-width:641px){
  .keyfacts ul{column-gap:clamp(1.4rem,1rem + 1.5vw,2.4rem);row-gap:0}
  .keyfacts ul li{padding:.8rem 0 .85rem;background:none;border:0;border-top:1px solid rgba(255,255,255,.12);border-radius:0}
  .prose .keyfacts ul li{padding:.7rem 0 .75rem}
}

/* 16 — CIBLES D'AU MOINS 24 PX (WCAG 2.2) : lien du bandeau de confiance, cases à cocher du simulateur */
.trust-item strong a{display:inline-block;padding-block:.25rem}
.sim__opt input{width:1.5rem;height:1.5rem;min-width:1.5rem}
/* Exposants (1er, 2e, 1st…) : au moins 12 px à toutes les largeurs (déjà le cas sur téléphone via app-mobile.css) */
sup{font-size:max(.75em,12px);line-height:0}