/* ====================================================================
   SYSTEME DE DESSIN TEHWIL — vitrine
   ====================================================================

   Ce fichier remplace la typographie et les mesures du gabarit. Il est
   charge APRES style.css et custom.css : il a donc le dernier mot, et on
   n'a pas eu a toucher au gabarit lui-meme.

   LA TYPOGRAPHIE. Une seule famille, POPPINS, sur trois graisses.

   C'est le choix de la reference retenue par le proprietaire (le kit
   Paymt) : une grotesque geometrique, ronde, chaleureuse, qui tient
   aussi bien a 57 px en titre qu'a 15 px en texte courant. Une seule
   famille bien reglee vaut mieux que deux mal accordees — la hierarchie
   vient alors de la graisse et de la taille, pas d'un contraste de
   dessin.

   Elle remplace le couple Fraunces / Manrope. Fraunces, antique a
   contraste, donnait une page plus editoriale ; le proprietaire a
   tranche pour la premiere apres deux refus. Les deux fichiers restent
   dans /fonts si l'on veut y revenir.

   Poppins est sous SIL Open Font License : libre d'usage commercial et
   d'embarquage. On la SERT NOUS-MEMES. Une vitrine de service financier
   qui appelle fonts.googleapis.com a chaque chargement expose l'adresse
   IP de chaque visiteur a un tiers, et tombe avec lui.

   LES REGLAGES viennent de la reference, mesures dans sa page et non
   estimes a l'oeil : titres en 600 avec une approche de -0.5 px,
   display autour de 57 px, texte courant a 15 px sur 26 px
   d'interlignage. L'approche negative sur les grands corps n'est pas
   une coquetterie : plus les lettres grandissent, plus elles paraissent
   ecartees.
   ==================================================================== */

@font-face{
    font-family:'Poppins';
    src:url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
    /* La page reste lisible pendant le chargement : le texte s'affiche
       dans la police de secours puis bascule. Un `block` afficherait du
       vide — sur une page d'accueil, c'est perdre le visiteur. */
    font-display:swap;
}
@font-face{
    font-family:'Poppins';
    src:url('../fonts/Poppins-Medium.ttf') format('truetype');
    font-weight:500;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Poppins';
    src:url('../fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight:600;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Poppins';
    src:url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight:800;
    font-style:normal;
    font-display:swap;
}
/* Les deux familles du gabarit de l'infolettre. Servies par nous, pas par
   fonts.googleapis.com : le dessin est identique, seule la livraison change. */
@font-face{
    font-family:'Inter';
    src:url('../fonts/Inter.ttf') format('truetype-variations'),
        url('../fonts/Inter.ttf') format('truetype');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Plus Jakarta Sans';
    src:url('../fonts/PlusJakartaSans.ttf') format('truetype-variations'),
        url('../fonts/PlusJakartaSans.ttf') format('truetype');
    font-weight:200 800;
    font-style:normal;
    font-display:swap;
}

:root{
    /* --- Couleurs ---------------------------------------------------
       L'orange et le navy sont ceux des trois applications. Le teal
       n'est PAS une seconde couleur de marque : c'est une couleur
       SEMANTIQUE, reservee a ce qui est acquis — gratuit, verifie,
       disponible. La distinction compte : melanger les deux roles
       donne une page qui crie de partout. */
    --t-orange:#F5821F;
    --t-orange-fonce:#E0740F;
    --t-orange-pale:#FEEFDD;
    --t-encre:#14224A;
    --t-navy:#0D1A33;
    --t-creme:#FFF7EE;
    --t-attenue:#5F6B80;
    --t-trait:#ECEEF3;
    --t-dore:#D2A757;
    --t-acquis:#12A277;
    --t-acquis-pale:#E1F5EE;

    /* --- Le sable, second accent ------------------------------------
       Repris de la reference, ou il porte les boutons secondaires et
       les pastilles d'icones. C'est la SEULE entorse a la regle du
       mono-accent, et elle se defend : le sable est une teinte
       DESATUREE, il ne rivalise pas avec l'orange, il l'accompagne.
       Un second accent sature — un bleu, un violet — se battrait avec
       lui a chaque ecran.

       Le texte pose dessus est TOUJOURS l'encre navy : du blanc sur ce
       sable donne 1,7:1, illisible. */
    --t-sable:#E6D2B4;
    --t-sable-fonce:#D8BE97;
    --t-sable-pale:#F6EFE4;

    /* --- Fonds ------------------------------------------------------ */
    --t-gris:#F8F8F8;      /* le fond neutre entre deux sections claires */
    --t-carte:#FFFFFF;

    /* --- Formes -----------------------------------------------------
       La reference tient sur deux rayons et pas un de plus : les
       boutons sont des PILULES completes, les cartes ont 18 px. Melanger
       trois rayons est le defaut le plus visible d'une page bricolee. */
    --t-rayon-carte:18px;
    --t-rayon-panneau:28px;
    --t-rayon-pastille:999px;

    /* --- Rythme vertical --------------------------------------------
       Une section respire sur 74 px. Le bas est LEGEREMENT plus grand
       que le haut : optiquement, un bloc centre mathematiquement parait
       colle au contenu qui le suit. */
    --t-section:74px;
    --t-section-bas:82px;
}

/* --- Le corps du texte ------------------------------------------- */
body{
    font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--t-attenue);
    font-size:15px;
    line-height:26px;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
}

/* --- Les titres ---------------------------------------------------
   Meme famille que le texte, mais 600 et une approche resserree. La
   hierarchie vient de la GRAISSE et de la TAILLE, pas d'un second
   dessin de lettre. */
h1,h2,h3,h4,.h1,.h2,.h3,
.section-title h2,.banner-title{
    font-family:'Poppins',system-ui,-apple-system,sans-serif;
    font-weight:600;
    line-height:1.12;
    letter-spacing:-.5px;
    color:var(--t-encre);
    text-wrap:balance;
}

/* Les titres de CARTE : meme famille, interlignage plus ouvert parce
   qu'ils tiennent souvent sur deux lignes dans une colonne etroite. */
.fcard h3,.t-metier h3,.t-etapes h3,.wli b,.cc h3,
.t-pays-nom strong,.t-frais dt,.t-simu-detail dt{
    font-family:'Poppins',system-ui,sans-serif;
    font-weight:600;
    letter-spacing:-.2px;
    line-height:1.35;
    color:var(--t-encre);
}

/* --- Le surtitre --------------------------------------------------
   Capitales espacees, au-dessus du titre. Dans la reference il est
   CENTRE quand le titre l'est, et cale a gauche sinon : c'est le bloc
   qui decide, pas le surtitre. */
.t-surtitre,.eyebrow{
    font-family:'Poppins',system-ui,sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:2.2px;   /* les capitales ont besoin d'air */
    text-transform:uppercase;
    color:var(--t-orange-fonce);
    display:block;
}

/* --- L'en-tete de section ----------------------------------------
   Le motif le plus repete de la reference : surtitre, tres gros titre,
   phrase d'appui — le tout centre sur une largeur limitee. Il est
   defini UNE fois ici et reutilise par toutes les sections. */
.t-entete{
    text-align:center;
    max-inline-size:52ch;
    margin-inline:auto;
    margin-block-end:3.25rem;
}
.t-entete h2{
    font-size:clamp(1.9rem,4.2vw,3.4rem);
    margin:.5rem 0 .9rem;
}
.t-entete p{
    color:var(--t-attenue);
    margin:0 auto;
    max-inline-size:62ch;
}

/* --- Les paragraphes ---------------------------------------------- */
p{line-height:1.65}
/* Environ 65 signes par ligne : au-dela, l'oeil perd le debut de la
   ligne suivante. */
.t-intro,.lead,.t-section p{max-inline-size:65ch}

/* --- Les chiffres -------------------------------------------------
   Chasse fixe des qu'ils s'empilent : sans quoi les milliers dansent
   d'une ligne a l'autre dans un tableau de frais. */
.t-chiffres,.t-simu-detail dd,.t-frais dd,.t-plafonds-ligne span,
.t-demo-minutage{
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
}

/* --- Les boutons --------------------------------------------------
   Pilule COMPLETE, comme la reference. Deux niveaux seulement :

     .t-bouton          orange, l'action principale
     .t-bouton.est-sable  sable, l'action secondaire

   Dans les deux cas le texte est l'encre navy. Du blanc sur l'orange
   donne 2,59:1 et sur le sable 1,7:1 — tres loin du seuil de 4,5. Le
   gabarit faisait exactement cette faute. */
.btn-primary,.btn-warning,.tehwil-bouton,.t-bouton{
    font-family:'Poppins',system-ui,sans-serif;
    font-weight:600;
    font-size:15px;
    letter-spacing:-.1px;
    border:0;
    border-radius:var(--t-rayon-pastille);
    padding:14px 30px;
    display:inline-flex;align-items:center;gap:.55rem;
    background:var(--t-orange);
    color:var(--t-encre);
    text-decoration:none;
    /* Ombre TEINTEE de la couleur du bouton, jamais un noir generique :
       une ombre grise sous un bouton orange le fait paraitre sale. */
    box-shadow:0 10px 24px rgba(245,130,31,.28);
    transition:transform .32s cubic-bezier(.2,0,0,1),
               background-color .32s cubic-bezier(.2,0,0,1),
               box-shadow .32s cubic-bezier(.2,0,0,1);
}
.t-bouton:hover{
    background:var(--t-orange-fonce);
    color:var(--t-encre);
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(245,130,31,.34);
}
/* Sur pression, le bouton s'enfonce — le retour est immediat, avant
   meme que la page ait repondu. */
.t-bouton:active{transform:translateY(0) scale(.985)}
.t-bouton:focus-visible{outline:3px solid var(--t-encre);outline-offset:3px}

.t-bouton.est-sable{
    background:var(--t-sable);
    box-shadow:0 10px 24px rgba(216,190,151,.34);
}
.t-bouton.est-sable:hover{
    background:var(--t-sable-fonce);
    box-shadow:0 14px 30px rgba(216,190,151,.4);
}

@media (prefers-reduced-motion:reduce){
    .t-bouton{transition:none}
    .t-bouton:hover{transform:none}
}

/* --- Les cartes ---------------------------------------------------
   Blanches, 18 px de rayon, une ombre tres basse et TEINTEE du navy.
   Pas de bordure : dans la reference c'est l'ombre seule qui detache
   la carte du fond gris. */
.t-carte-blanche{
    background:var(--t-carte);
    border-radius:var(--t-rayon-carte);
    padding:2rem;
    box-shadow:0 2px 4px rgba(20,34,74,.04),0 12px 32px rgba(20,34,74,.06);
}

/* La pastille d'icone ronde, sable, qui coiffe chaque carte. */
.t-pastille{
    inline-size:74px;block-size:74px;
    border-radius:50%;
    background:var(--t-sable);
    display:flex;align-items:center;justify-content:center;
    color:var(--t-encre);
    margin-block-end:1.5rem;
}
.t-pastille svg{inline-size:34px;block-size:34px}

/* --- Les fonds ----------------------------------------------------
   Un blanc pur sous une page entiere est froid et sonne « gabarit ».
   Le creme rechauffe sans colorer ; le gris neutre separe deux
   sections claires sans poser de trait. */
.t-fond-creme{background:var(--t-creme)}
.t-fond-gris{background:var(--t-gris)}

/* La bande sombre. Dans la reference elle est violette ; ici c'est le
   navy de la marque, et les cartes blanches y ressortent pareil. */
.t-bande-sombre{background:var(--t-encre);color:#fff}
.t-bande-sombre h2,.t-bande-sombre h3{color:#fff}
.t-bande-sombre p{color:rgba(255,255,255,.72)}
.t-bande-sombre .t-surtitre{color:var(--t-sable)}

/* Le balisage `##texte##` de l'administration produit une PASTILLE orange a
   texte blanc. Sur fond clair elle passe ; sur la bande sombre elle donne un
   surligneur fluo, et du blanc sur cet orange ne fait que 2,59:1. On la
   ramene donc a du texte orange, sans fond : le mot reste accentue, et il
   redevient lisible. */
.t-bande-sombre .bg-primary,
.t-bande-sombre .text-primary{
    background:transparent !important;
    color:var(--t-orange) !important;
    padding:0 !important;
}

/* ====================================================================
   LE BANDEAU DE NAVIGATION

   Le gabarit ne lui donnait un fond QU'AU DEFILEMENT : en haut de page
   il etait transparent, et ses liens blancs se lisaient sur le hero navy.
   Depuis que le hero est creme, ces liens blancs sont devenus invisibles
   — le bandeau paraissait avoir disparu.

   Il porte donc son fond des le chargement. On garde le navy plutot que
   le blanc translucide de la maquette pour une raison prosaique : notre
   logo de vitrine est en blanc. Sur un bandeau clair il faudrait une
   version sombre du logo, qui n'existe pas encore.
   ==================================================================== */
.header .sticky-bg-area::after{
    content:"";position:absolute;z-index:-1;
    inset-block-start:0;inset-inline-start:-1rem;
    inline-size:calc(100% + 2rem);block-size:100%;
    border-radius:12px;
    background:rgba(13,26,51,.86);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    box-shadow:0 .75rem 2rem rgba(13,26,51,.14);
}
.header .sticky-bg-area{position:relative;inset-block-start:.5rem;z-index:1}

/* Les liens restent clairs, puisque le fond reste sombre. Le lien actif et
   le survol prennent l'orange de la marque. */
.header .main-menu > li > a{color:rgba(255,255,255,.82);font-weight:600}
.header .main-menu > li > a:hover,
.header .main-menu > li > a.active{color:var(--t-orange,#F5821F)}

@media (max-width:991px){
    .header .sticky-bg-area{padding-inline:1rem}
}


/* ===================================================================
   LES SECTIONS DE LA VITRINE
   ===================================================================

   Ce qui suit vivait dans huit blocs <style> disperses au milieu des
   vues Blade — 744 lignes de CSS enfermees dans du HTML, soit plus des
   deux tiers de la feuille de style du site.

   C'etait commode a l'ecriture et intenable a la relecture. Personne ne
   pouvait plus lire la cascade d'un seul tenant ; deux regles qui se
   contredisaient ne se voyaient pas ; et le meme jeton etait redefini
   dans trois fichiers avec trois valeurs de repli differentes.

   Chaque section garde son titre et ses commentaires : on n'a pas
   deplace du code, on a remis une feuille de style a sa place.
   =================================================================== */


/* --- LE HAUT DE PAGE ---------------------------------------------
     source : landing/partials/.../intro.blade.php

     La reference procede en deux temps : le titre SEUL sur toute la
     largeur, puis une scene a trois colonnes en dessous. C'est ce qui
     lui donne son calme — un hero ordinaire empile titre et visuel cote
     a cote, et les deux se disputent le regard des la premiere seconde. */

.t-hero{
    background:linear-gradient(180deg,var(--t-creme,#FFF7EE),#fff 78%);
    padding-block:64px 72px;
    overflow:hidden;
}

/* 1. L'annonce. */
/* La largeur est en REM, pas en `ch` : `ch` se mesure sur le chiffre zero
   de la police, et a 4 rem de corps il donnait une colonne si etroite que
   le titre tombait mot par mot. */
.t-hero-annonce{text-align:center;max-inline-size:min(100%,58rem);margin-inline:auto;margin-block-end:3.5rem}
.t-hero-titre{
    font-size:clamp(2.4rem,5.6vw,4.2rem);
    line-height:1.06;
    letter-spacing:-1.4px;   /* plus les lettres grandissent, plus elles paraissent ecartees */
    margin:.75rem 0 0;
}
.t-hero-titre span{color:var(--t-orange-fonce,#E0740F) !important}

/* 2. La scene. Trois colonnes, le telephone au centre et plus large que
      les deux autres : c'est lui le sujet. */
.t-hero-scene{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);
    align-items:center;
    gap:2rem;
}

/* Le fragment d'interface qui flotte a gauche. Il porte l'ombre d'un
   objet POSE sur la page, pas d'une carte encastree dedans. */
.t-hero-fragment{
    background:#fff;
    border-radius:var(--t-rayon-carte,18px);
    padding:1.5rem;
    box-shadow:0 2px 6px rgba(20,34,74,.05),0 24px 56px rgba(20,34,74,.13);
    justify-self:end;
    max-inline-size:23rem;
}
.t-fragment-entete{
    font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--t-attenue,#5F6B80);
    padding-block-end:1rem;
    border-block-end:1px solid var(--t-trait,#ECEEF3);
    margin-block-end:.5rem;
}
.t-fragment-liste{list-style:none;margin:0;padding:0}
.t-fragment-liste li{display:flex;align-items:center;gap:1rem;padding-block:.9rem}
.t-fragment-liste li+li{border-block-start:1px solid var(--t-trait,#ECEEF3)}
.t-fragment-icone{
    flex:none;inline-size:44px;block-size:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--t-sable-pale,#F6EFE4);color:var(--t-encre,#14224A);
}
.t-fragment-icone svg{inline-size:22px;block-size:22px}
/* Les trois gestes primaires de l'application gardent ici les teintes
   qu'ils ont a l'ecran : le visiteur les reconnait avant de lire. */
.t-fragment-icone.est-envoi{background:var(--t-orange-pale,#FEEFDD);color:var(--t-orange-fonce,#E0740F)}
.t-fragment-icone.est-retrait{background:var(--t-acquis-pale,#E1F5EE);color:var(--t-acquis,#12A277)}
.t-fragment-icone.est-paiement{background:var(--t-sable-pale,#F6EFE4);color:var(--t-encre,#14224A)}
.t-fragment-texte strong{display:block;font-size:.9375rem;font-weight:600;color:var(--t-encre,#14224A)}
.t-fragment-texte small{display:block;font-size:.8125rem;color:var(--t-attenue,#5F6B80);line-height:1.5}

/* Le telephone, au centre. Pas de cadre dessine : l'image porte deja
   son chassis. On ne pose qu'une ombre, teintee du navy de la marque. */
.t-hero-telephone{justify-self:center;inline-size:min(300px,100%)}
.t-hero-telephone img{
    inline-size:100%;block-size:auto;display:block;
    border-radius:2.2rem;
    box-shadow:0 2.5rem 5rem rgba(20,34,74,.26);
}

/* L'argumentaire, a droite. */
.t-hero-propos{max-inline-size:24rem}
.t-hero-propos h2{font-size:1.375rem;line-height:1.35;letter-spacing:-.3px;margin:0 0 .9rem}
.t-hero-propos p{color:var(--t-attenue,#5F6B80);margin:0}
.t-hero-appels{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:1.75rem}

.t-preuves{
    list-style:none;margin:2.25rem 0 0;padding:0;
    display:flex;flex-direction:column;gap:1rem;
}
.t-preuves li{
    padding-inline-start:1rem;
    border-inline-start:2px solid rgba(245,130,31,.55);
}
.t-preuves strong{
    display:block;color:var(--t-encre,#14224A);font-size:.9375rem;
    font-weight:600;margin-block-end:.15rem;
}
.t-preuves span{
    display:block;color:var(--t-attenue,#5F6B80);font-size:.8125rem;line-height:1.5;
}

/* Sous 1200 px, la colonne de gauche passe DESSOUS plutot que de se
   comprimer : un fragment d'interface ecrase ne se lit plus. */
@media (max-width:1199px){
    .t-hero-scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .t-hero-fragment{grid-column:1 / -1;justify-self:center;max-inline-size:26rem;order:3}
    .t-hero-telephone{order:1}
    .t-hero-propos{order:2;max-inline-size:none}
}
@media (max-width:767px){
    .t-hero-scene{grid-template-columns:minmax(0,1fr);gap:2.5rem}
    .t-hero-telephone{inline-size:min(250px,70%)}
    .t-hero-propos{text-align:center}
    .t-hero-propos p{margin-inline:auto}
    .t-hero-appels{justify-content:center}
    .t-preuves li{text-align:start}
}

/* --- LA DEMONSTRATION --------------------------------------------
     source : landing/partials/.../demonstration.blade.php */

.t-demo{background:#F7F8FB}

.t-demo-sommaire{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.t-demo-sommaire li{display:flex;gap:.9rem;align-items:baseline;color:var(--title-color,#1B2A52)}
.t-demo-minutage{
    flex:0 0 auto;min-inline-size:3.1rem;
    font-weight:700;font-size:.875rem;
    color:var(--tehwil-orange,#F5821F);
}

/* Le cadre. Coins larges sur le contenant, plus serres a l'interieur :
   un rayon uniforme partout est la marque d'un gabarit. */
.t-demo-cadre{
    position:relative;margin:0;border-radius:1.75rem;overflow:hidden;
    background:var(--tehwil-navy,#1B2A52);
    /* Ombre TEINTEE du navy de la marque, pas un noir generique. */
    box-shadow:0 1.75rem 3.5rem rgba(27,42,82,.22);
    aspect-ratio:16/9;
}
.t-demo-affiche{inline-size:100%;block-size:100%;object-fit:cover;display:block;opacity:.72}
/* Le lecteur insere au clic — iframe pour YouTube/Vimeo, <video> pour un
   fichier pose chez nous. Meme cadre, meme place : le visiteur ne voit pas
   la difference, il voit la video demarrer la ou etait l'affiche.
   « contain » et non « cover » : on ne recadre pas une video, on la montre
   entiere, quitte a laisser deux bandes navy si le format n'est pas 16/9. */
.t-demo-cadre iframe,
.t-demo-cadre video{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}
.t-demo-cadre video{object-fit:contain;background:var(--tehwil-navy,#1B2A52)}

.t-demo-lecture{
    position:absolute;inset-block-start:50%;inset-inline-start:50%;
    transform:translate(-50%,-50%);
    inline-size:5.25rem;block-size:5.25rem;border:0;border-radius:50%;
    background:var(--tehwil-orange,#F5821F);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    box-shadow:0 .75rem 2rem rgba(27,42,82,.35);
    transition:transform .18s cubic-bezier(.2,0,0,1),background .18s cubic-bezier(.2,0,0,1);
}
.t-demo-lecture svg{
    inline-size:2rem;block-size:2rem;
    /* Encre sombre : du blanc sur cet orange donne 2,59:1. */
    fill:var(--tehwil-encre,#16224A);
    /* Un triangle centre mathematiquement PARAIT decale a gauche.
       On le repousse de 2 px pour qu'il paraisse centre. */
    margin-inline-start:2px;
}
.t-demo-lecture:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--tehwil-orange-fonce,#E0740F)}
.t-demo-lecture:active{transform:translate(-50%,-50%) scale(.98)}
.t-demo-lecture:focus-visible{outline:3px solid #fff;outline-offset:4px}

.t-demo-bientot{
    position:absolute;inset-block-end:1.25rem;inset-inline-start:1.5rem;
    margin:0;padding:.45rem .9rem;border-radius:999px;
    background:rgba(255,255,255,.9);color:var(--tehwil-encre,#16224A);
    font-size:.8125rem;font-weight:600;
}

@media (prefers-reduced-motion:reduce){
    .t-demo-lecture{transition:none}
    .t-demo-lecture:hover{transform:translate(-50%,-50%)}
}

/* --- LES TROIS METIERS -------------------------------------------
     source : landing/partials/.../pour-qui.blade.php */

/* Le titre passe par `.t-entete`, defini une fois en haut de ce fichier :
   surtitre, gros titre, le tout centre. C'est le motif que la reference
   repete a chaque section, et il n'a plus a etre redecrit ici.

   Le particulier occupe la colonne de gauche sur toute la hauteur ;
   les deux autres s'empilent a droite. */
.t-metiers-grille{
    display:grid;gap:1.25rem;
    grid-template-columns:1.15fr 1fr;
    grid-template-areas:"principal second" "principal tiers";
}
.t-metier.est-principal{grid-area:principal}
.t-metiers-grille > :nth-child(2){grid-area:second}
.t-metiers-grille > :nth-child(3){grid-area:tiers}

@media (max-width:900px){
    .t-metiers-grille{grid-template-columns:1fr;grid-template-areas:none}
    .t-metier.est-principal,.t-metiers-grille > :nth-child(2),.t-metiers-grille > :nth-child(3){grid-area:auto}
}

.t-metier{
    position:relative;overflow:hidden;
    padding:2rem;border-radius:var(--t-rayon-carte,18px);
    background:#fff;border:0;
    /* Pas de bordure : dans la reference c'est l'OMBRE seule qui detache
       la carte du fond gris. Une bordure plus une ombre, c'est deux fois
       le meme travail, et ca durcit le bloc. */
    box-shadow:0 2px 4px rgba(20,34,74,.04),0 12px 32px rgba(20,34,74,.06);
    display:flex;flex-direction:column;
    transition:transform .32s cubic-bezier(.2,0,0,1),box-shadow .32s cubic-bezier(.2,0,0,1);
}
/* Le filet de couleur : c'est lui qui identifie le metier. Il est en
   haut du bloc, pas sur le cote — un rail lateral sur carte arrondie
   est le tic visuel le plus repandu du moment. */
.t-metier::before{
    content:"";position:absolute;inset-block-start:0;inset-inline:0;
    block-size:4px;background:var(--teinte);
}
.t-metier:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(20,34,74,.05),0 22px 48px rgba(20,34,74,.11)}

.t-metier.est-principal{
    padding:2.5rem;
    background:linear-gradient(158deg,var(--t-encre,#14224A),var(--t-navy,#0D1A33));
    border-color:transparent;color:#fff;
}
.t-metier.est-principal h3{color:#fff}
.t-metier.est-principal p{color:rgba(255,255,255,.74)}
.t-metier.est-principal li{color:rgba(255,255,255,.86)}
.t-metier.est-principal .t-metier-etiquette{background:rgba(255,255,255,.12);color:#fff}

.t-metier-etiquette{
    align-self:flex-start;
    /* Pilule complete, comme tous les elements de forme de la page. */
    padding:.35rem .85rem;border-radius:var(--t-rayon-pastille,999px);
    background:color-mix(in srgb,var(--teinte) 12%,transparent);
    color:var(--teinte);
    font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.t-metier h3{margin:1.1rem 0 .6rem;font-size:1.375rem;color:var(--t-encre,#14224A)}
.t-metier p{margin:0;line-height:1.65;color:var(--t-attenue,#5F6B80)}
.t-metier ul{list-style:none;margin:1.15rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.t-metier li{
    position:relative;padding-inline-start:1.35rem;line-height:1.55;
    color:var(--title-color,#1B2A52);font-size:.9375rem;
}
/* Un tiret cadratin plutot qu'une puce ou une coche verte : c'est la
   ponctuation francaise de l'enumeration, et ca ne fait pas
   « argumentaire de vente ». */
.t-metier li::before{
    content:"—";position:absolute;inset-inline-start:0;
    color:var(--teinte);font-weight:700;
}
.t-metier.est-principal li::before{color:var(--tehwil-dore,#D2A757)}

/* `margin-block-start:auto` pousse le lien contre le bas du bloc :
   les trois liens s'alignent alors sur une meme base, quelle que soit
   la longueur du texte au-dessus. */
.t-metier-lien{
    margin-block-start:auto;padding-block-start:1.5rem;
    display:inline-flex;align-items:center;gap:.4rem;
    font-weight:650;font-size:.9375rem;text-decoration:none;
    color:var(--teinte);
}
.t-metier-lien span{transition:transform .18s cubic-bezier(.2,0,0,1);display:inline-block}
.t-metier-lien:hover{color:var(--teinte)}
.t-metier-lien:hover span{transform:translateX(3px)}
.t-metier.est-principal .t-metier-lien{color:var(--tehwil-dore,#D2A757)}

@media (prefers-reduced-motion:reduce){
    .t-metier-lien span{transition:none}
    .t-metier-lien:hover span{transform:none}
}

@media (prefers-reduced-motion:reduce){
    .t-metier{transition:none}
    .t-metier:hover{transform:none}
}

/* --- DEVENIR AGENT -----------------------------------------------
     source : landing/partials/.../agent-registration.blade.php */

.t-agent{padding-block:4rem}
.t-agent-cadre{
    display:grid;grid-template-columns:1.1fr .9fr;
    border-radius:var(--t-rayon-panneau,28px);overflow:hidden;
    background:linear-gradient(158deg,var(--t-encre,#14224A),var(--t-navy,#0D1A33));
    color:#fff;
}
.t-agent-texte{padding:3rem 2.75rem;display:flex;flex-direction:column;justify-content:center}
.t-agent-texte h2{color:#fff;font-size:clamp(1.75rem,3.2vw,2.6rem);margin:.5rem 0 .9rem}
/* Sur ce fond sombre, la pastille du balisage redevient du texte orange :
   un aplat y ferait surligneur, et du blanc dessus ne ferait que 2,59:1. */
.t-agent-texte h2 span{color:var(--t-orange,#F5821F) !important;background:transparent !important;padding:0 !important}
.t-agent-texte > p{color:rgba(255,255,255,.72);margin:0;line-height:1.7;max-inline-size:38ch}

.t-agent-points{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.t-agent-points li{
    position:relative;padding-inline-start:1.35rem;
    color:rgba(255,255,255,.88);font-size:.9375rem;line-height:1.5;
}
.t-agent-points li::before{
    content:"—";position:absolute;inset-inline-start:0;
    color:var(--t-dore,#D2A757);font-weight:700;
}

/* Le bouton passe sur `.t-bouton`, defini une fois en haut de ce fichier. */
.t-agent-texte .t-bouton{align-self:flex-start;margin-block-start:2rem}
.t-agent-bouton span{transition:transform .18s cubic-bezier(.2,0,0,1)}
.t-agent-bouton:hover span{transform:translateX(3px)}

.t-agent-photo{margin:0;position:relative;min-block-size:100%}
.t-agent-photo img{
    position:absolute;inset:0;inline-size:100%;block-size:100%;
    object-fit:cover;object-position:center 30%;
}
/* Un degrade depuis le navy vers la photo : sans lui, la limite entre
   le texte et l'image est une couture nette qui trahit le collage. */
.t-agent-photo::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,var(--t-navy,#0D1A33),transparent 38%);
}

@media (max-width:900px){
    .t-agent-cadre{grid-template-columns:1fr}
    .t-agent-texte{padding:2.25rem 1.75rem}
    .t-agent-photo{min-block-size:16rem}
    .t-agent-photo::after{background:linear-gradient(180deg,var(--t-navy,#0D1A33),transparent 42%)}
}
@media (prefers-reduced-motion:reduce){
    .t-agent-bouton,.t-agent-bouton span{transition:none}
    .t-agent-bouton:hover{transform:none}
    .t-agent-bouton:hover span{transform:none}
}

/* --- LES TROIS ETAPES --------------------------------------------
     source : landing/partials/.../how-it-works.blade.php */

.tehwil-surtitre {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tehwil-orange, #F5821F);
}

.tehwil-etapes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.tehwil-etapes > li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.tehwil-etapes-numero {
    flex: 0 0 auto;
    inline-size: 3rem;
    block-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--tehwil-orange, #F5821F);
    /* Encre sombre, pas blanche : du blanc sur cet orange donne 2,59:1,
       tres loin du seuil de 4,5. Le bleu nuit donne 5,94:1. */
    color: var(--tehwil-encre, #16224A);
    font-size: 1.0625rem;
    font-weight: 800;
}
.tehwil-etapes h3 {
    font-size: 1.1875rem;
    margin: 0 0 .35rem;
}
.tehwil-etapes p {
    margin: 0;
    color: var(--paragraph-color, #6c757d);
    line-height: 1.65;
}

/* La maquette dans son chassis : l'ecran est GLISSE DERRIERE le
   telephone, aux memes proportions que le haut de page (90 % de
   largeur, decale de 6 % et 2 %), sinon l'image deborde du cadre. */
.tehwil-etapes-visuel {
    position: relative;
    max-inline-size: 320px;
    margin-inline: auto;
}
.tehwil-etapes-chassis {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    display: block;
}
.tehwil-etapes-ecran {
    position: absolute;
    z-index: 0;
    inset-inline-start: 6%;
    inset-block-start: 2%;
    inline-size: 90%;
}

@media (max-width: 991px) {
    .tehwil-etapes-visuel { max-inline-size: 260px; margin-block-start: 2rem; }
}

/* --- LE CONVERTISSEUR (page de pays) -----------------------------
     source : landing/partials/.../simulateur.blade.php */

.t-simu h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}

.t-simu-carte{
    padding:1.5rem;border-radius:1.5rem;background:#fff;
    border:1px solid var(--t-trait,#ECEEF3);
    box-shadow:0 1.5rem 3rem rgba(20,34,74,.10);
}

.t-simu-taux{
    margin:0 0 1.1rem;padding:.6rem .9rem;border-radius:.75rem;
    background:var(--t-creme,#FFF7EE);
    font-size:.875rem;font-weight:700;color:var(--t-encre,#14224A);
    text-align:center;font-variant-numeric:tabular-nums;
}
.t-simu-taux.est-ferme{background:#FFF1F1;color:#9B2C2C}

.t-simu-champ{margin-block-end:.85rem}
.t-simu-champ label{
    display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--t-attenue,#5F6B80);margin-block-end:.4rem;
}
/* Le montant et le pays dans un meme cadre : c'est UNE decision, pas
   deux. Le gabarit de reference les separe par une couleur, on les
   separe par un filet — plus sobre, meme lisibilite. */
.t-simu-rangee{
    display:flex;align-items:stretch;
    border:1.5px solid var(--t-trait,#ECEEF3);border-radius:1rem;overflow:hidden;
    transition:border-color .18s cubic-bezier(.2,0,0,1);
}
.t-simu-rangee:focus-within{border-color:var(--t-orange,#F5821F)}
.t-simu-rangee input,
.t-simu-rangee output{
    flex:1;min-inline-size:0;border:0;background:transparent;
    padding:.75rem 1rem;
    font-size:1.75rem;font-weight:800;color:var(--t-encre,#14224A);
    font-variant-numeric:tabular-nums;line-height:1.25;
}
.t-simu-rangee input:focus{outline:none}
/* --- Le selecteur de pays ---------------------------------------
   Bouton + panneau, parce qu'un <select> natif ouvre un menu que le
   systeme dessine : sa hauteur ne se borne pas, et a cinquante-quatre
   entrees il recouvre la page. */
.t-choix{position:relative;flex:none;display:flex}
.t-choix-bouton{
    display:flex;align-items:center;gap:.45rem;
    border:0;border-inline-start:1.5px solid var(--t-trait,#ECEEF3);
    background:#FBFBFC;padding:0 .8rem;cursor:pointer;
    font-family:inherit;font-size:.875rem;font-weight:800;
    color:var(--t-encre,#14224A);
    inline-size:10.5rem;block-size:100%;
}
.t-choix-bouton .nom{
    flex:1;min-inline-size:0;text-align:start;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.t-choix-bouton .drapeau{font-size:1.05rem;line-height:1}
.t-choix-bouton .chevron{
    inline-size:.7rem;flex:none;transition:transform .18s cubic-bezier(.2,0,0,1);
}
.t-choix.est-ouvert .t-choix-bouton .chevron{transform:rotate(180deg)}
.t-choix-bouton:focus-visible{outline:2px solid var(--t-orange,#F5821F);outline-offset:-2px}

/* Le panneau : centre sur l'ecran, par-dessus un voile. Ce n'est
   pas un menu accroche au champ — c'est une decision a part entiere,
   et a cinquante-quatre pays elle merite l'ecran pour elle. */
.t-choix-voile{
    position:fixed;inset:0;z-index:1000;
    background:rgba(13,26,51,.55);
    display:flex;align-items:center;justify-content:center;
    padding:1.25rem;
}
.t-choix-voile[hidden]{display:none}

.t-choix-panneau{
    inline-size:min(30rem,100%);
    background:#fff;border-radius:1.25rem;overflow:hidden;
    box-shadow:0 2rem 4rem rgba(13,26,51,.35);
    display:flex;flex-direction:column;
    max-block-size:min(34rem,86vh);
}

.t-choix-entete{
    position:relative;padding:1.35rem 3rem 1.15rem;
    text-align:center;border-block-end:1px solid var(--t-trait,#ECEEF3);
}
.t-choix-entete h3{
    margin:0;font-size:1.25rem;font-weight:700;
    color:var(--t-encre,#14224A);
}
.t-choix-fermer{
    position:absolute;inset-block-start:.9rem;inset-inline-end:.9rem;
    inline-size:2.25rem;block-size:2.25rem;border:0;border-radius:50%;
    background:transparent;color:var(--t-attenue,#5F6B80);
    font-size:1.5rem;line-height:1;cursor:pointer;
    display:grid;place-items:center;
}
.t-choix-fermer:hover{background:var(--t-creme,#FFF7EE);color:var(--t-encre,#14224A)}
.t-choix-fermer:focus-visible{outline:2px solid var(--t-orange,#F5821F);outline-offset:2px}

.t-choix-chercher{
    display:flex;align-items:center;gap:.6rem;
    padding:.85rem 1.25rem;background:#F7F8FB;
    border-block-end:1px solid var(--t-trait,#ECEEF3);
}
.t-choix-chercher svg{inline-size:1.1rem;flex:none;color:var(--t-attenue,#5F6B80)}
.t-choix-recherche{
    flex:1;min-inline-size:0;border:0;background:transparent;
    font-family:inherit;font-size:1rem;color:var(--t-encre,#14224A);
}
.t-choix-recherche:focus{outline:none}

.t-choix-liste{
    list-style:none;margin:0;padding:0;
    overflow-y:auto;overscroll-behavior:contain;flex:1;
}
.t-choix-groupe{
    padding:.75rem 1.25rem .4rem;
    font-size:.6875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:var(--t-attenue,#5F6B80);background:#fff;
    position:sticky;inset-block-start:0;
}
.t-choix-option{
    display:flex;align-items:center;gap:.85rem;
    padding:.7rem 1.25rem;cursor:pointer;
    border-block-end:1px solid var(--t-trait,#ECEEF3);
    font-size:1rem;font-weight:600;color:var(--t-encre,#14224A);
}
/* Le drapeau en pastille RONDE : l'emoji est recadre dans un cercle,
   agrandi puis rogne, comme sur la reference. */
.t-choix-option .rond{
    flex:none;inline-size:2.25rem;block-size:2.25rem;border-radius:50%;
    overflow:hidden;display:grid;place-items:center;
    background:var(--t-creme,#FFF7EE);
}
.t-choix-option .rond span{font-size:1.9rem;line-height:1;transform:scale(1.35)}
.t-choix-option .devise{margin-inline-start:auto;font-size:.9375rem;color:var(--t-attenue,#5F6B80);font-weight:700}
.t-choix-option:hover,.t-choix-option.est-survole{background:#F7F8FB}
.t-choix-option[aria-selected="true"]{background:var(--t-orange-pale,#FEEFDD)}
.t-choix-vide{padding:1.5rem 1.25rem;color:var(--t-attenue,#5F6B80);font-size:.9375rem;text-align:center}

.est-arrivee .t-simu-rangee{background:var(--t-acquis-pale,#E1F5EE);border-color:transparent}
.est-arrivee .t-simu-rangee output{color:var(--t-acquis,#12A277)}
.est-arrivee .t-choix-bouton{background:rgba(255,255,255,.65);border-inline-start-color:rgba(18,162,119,.2)}

.t-simu-detail{margin:1.1rem 0 0;display:flex;flex-direction:column}
.t-simu-detail > div{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    padding-block:.6rem;border-block-start:1px solid var(--t-trait,#ECEEF3);
}
.t-simu-detail dt{margin:0;color:var(--t-attenue,#5F6B80);font-size:.9375rem}
.t-simu-detail dd{margin:0;font-weight:800;color:var(--t-encre,#14224A);white-space:nowrap}
.t-simu-detail .est-total dd{color:var(--t-orange-fonce,#E0740F);font-size:1.1875rem}

.t-simu-note{
    margin:.9rem 0 0;min-block-size:1.2rem;
    font-size:.8125rem;line-height:1.55;color:var(--t-attenue,#5F6B80);
}
.t-simu-note.est-alerte{color:var(--t-orange-fonce,#E0740F)}

@media (prefers-reduced-motion:reduce){
    .t-simu-rangee{transition:none}
}

/* --- FRAIS ET PLAFONDS (page de pays) ----------------------------
     source : landing/partials/.../tarifs.blade.php */

.t-tarifs h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-block-end:1.75rem}

/* ---- Les frais : une liste de definitions, pas des cartes.
   Une carte n'a de sens que si l'elevation dit quelque chose ; ici
   c'est une enumeration, un filet suffit. ---- */
.t-frais{margin:0;padding:0}
.t-frais-ligne{
    display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
    padding-block:1.05rem;
    border-block-end:1px solid rgba(27,42,82,.10);
}
.t-frais-ligne:first-child{border-block-start:1px solid rgba(27,42,82,.10)}
.t-frais dt{font-weight:650;color:var(--title-color,#1B2A52);margin:0}
.t-frais dt span{
    display:block;font-weight:400;font-size:.875rem;line-height:1.5;
    color:var(--paragraph-color,#6c757d);margin-block-start:.2rem;
}
.t-frais dd{
    margin:0;flex:0 0 auto;white-space:nowrap;
    font-size:1.25rem;font-weight:800;color:var(--tehwil-orange,#F5821F);
}

/* ---- Les plafonds : une grille a trois colonnes. ---- */
.t-plafonds{
    border:1px solid rgba(27,42,82,.10);border-radius:1.25rem;overflow:hidden;background:#fff;
}
.t-plafonds-entete,.t-plafonds-ligne{
    display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;
    padding:.9rem 1.25rem;
}
.t-plafonds-entete{
    background:#F7F8FB;
    font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--paragraph-color,#6c757d);
}
.t-plafonds-entete span:not(:first-child),
.t-plafonds-ligne > span{text-align:end;min-inline-size:6.5rem}
.t-plafonds-ligne{border-block-start:1px solid rgba(27,42,82,.08)}
.t-plafonds-ligne > span{font-weight:700;color:var(--title-color,#1B2A52)}
.t-plafonds-palier strong{display:block;color:var(--title-color,#1B2A52)}
.t-plafonds-palier span{
    display:block;font-size:.8125rem;line-height:1.45;
    color:var(--paragraph-color,#6c757d);margin-block-start:.15rem;
}
/* Le palier le plus haut est celui vers lequel on veut mener : il est
   designe par la couleur, pas par une hauteur de bloc differente. */
.t-plafonds-ligne.est-haut{background:rgba(245,130,31,.06)}
.t-plafonds-ligne.est-haut > span{color:var(--tehwil-orange-fonce,#E0740F)}

.t-tarifs-note{
    margin-block-start:1rem;font-size:.8125rem;line-height:1.6;
    color:var(--paragraph-color,#6c757d);
}

@media (max-width:575px){
    .t-plafonds-entete,.t-plafonds-ligne{grid-template-columns:1fr auto;row-gap:.35rem}
    .t-plafonds-entete span:nth-child(3),.t-plafonds-ligne > span:nth-child(3){display:none}
}

/* --- LA COUVERTURE -----------------------------------------------
     source : landing/partials/.../nos-pays.blade.php */

/* Le fond navy de la marque : la carte y respire, et la section ferme la
   page sur la meme couleur que l'en-tete. */
.t-pays{
    padding-block:3.5rem;
    background:linear-gradient(158deg,var(--t-encre,#14224A),var(--t-navy,#0D1A33));
}
.t-pays-entete{text-align:center;max-inline-size:52ch;margin-inline:auto;margin-block-end:1.75rem}
.t-pays-entete h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);margin:.4rem 0 .6rem}
.t-pays-entete p{color:rgba(255,255,255,.66);margin:0;line-height:1.65}

/* La carte est une MAPPEMONDE : les deux tiers de sa hauteur sont de
   l'ocean vide. On la borne donc en HAUTEUR et on la recadre sur le
   continent plutot que de la laisser dicter la taille de la section.
   `object-fit:contain` sur un SVG a hauteur fixe le met a l'echelle sans
   le deformer. */
.t-pays-carte{
    margin:0 auto;max-inline-size:820px;
    /* Les deux variables que le SVG lit pour se colorer. */
    --pastille:rgba(255,255,255,.30);
    --pastille-vive:var(--tehwil-orange,#F5821F);
}
.t-pays-carte svg{inline-size:100%;block-size:auto;max-block-size:min(46vh,340px);object-fit:contain;display:block}

/* Le continent est allume EN ENTIER, d'une seule teinte. Rien ne clignote
   et rien ne se distingue : une pastille qui respirerait la ou le service
   est ouvert designerait un pays, et ce site n'en designe aucun.
   La couleur vive vient du SVG lui-meme (--pastille-vive). */

.t-pays-grille{
    display:grid;gap:1rem;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.t-pays-carte-lien{
    display:flex;align-items:center;gap:.9rem;
    padding:1rem 1.15rem;border-radius:1rem;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    text-decoration:none;
    transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),
               transform .2s cubic-bezier(.2,0,0,1);
}
.t-pays-carte-lien:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(245,130,31,.45);
    transform:translateY(-2px);
}
.t-pays-carte-lien:active{transform:translateY(0)}
.t-pays-carte-lien:focus-visible{outline:2px solid var(--tehwil-orange,#F5821F);outline-offset:3px}

.t-pays-drapeau{
    flex:none;inline-size:2.75rem;block-size:2.75rem;border-radius:.7rem;
    display:grid;place-items:center;
    background:rgba(255,255,255,.10);color:#fff;
    /* Un drapeau emoji est un CARACTERE : il suit la taille de la police.
       1.6 rem le fait remplir la pastille sans la deborder. La graisse et
       l'espacement servent au repli en deux lettres. */
    font-size:1.6rem;line-height:1;
    font-weight:800;letter-spacing:.02em;
    /* Certaines polices systeme rendent les drapeaux avec une ombre
       interne qui les salit sur fond sombre ; on les pose a plat. */
    text-shadow:none;
}
/* Le repli en deux lettres : a 1,6 rem « ZX » deborderait de la pastille. */
.t-pays-drapeau.est-code{font-size:.8125rem}
.t-pays-nom strong{display:block;color:#fff;font-weight:650}
.t-pays-nom small{display:block;font-size:.8125rem;color:rgba(255,255,255,.52)}
.t-pays-fleche{margin-inline-start:auto;color:var(--tehwil-orange,#F5821F);font-weight:700}

.t-pays-titre{
    color:#fff;font-size:.8125rem;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;margin:0 0 1rem;
    display:flex;align-items:center;gap:.6rem;
}
.t-pays-titre.est-a-venir{margin-block-start:2.5rem;color:rgba(255,255,255,.62)}
.t-pays-titre span{
    background:rgba(255,255,255,.12);border-radius:20px;padding:.15rem .55rem;
    font-size:.75rem;letter-spacing:0;
}

/* Cinquante et un pays ne peuvent pas etre cinquante et une cartes : la
   section ferait deux ecrans de haut pour ne rien dire de plus. Des
   pastilles compactes suffisent a montrer l'etendue. */
.t-pays-avenir{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;gap:.5rem;
}
.t-pays-avenir li{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.4rem .8rem;border-radius:40px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
    color:rgba(255,255,255,.72);font-size:.84rem;font-weight:600;
}
.t-pays-avenir li span{font-size:1rem;line-height:1}

@media (prefers-reduced-motion:reduce){
    .t-pays-carte-lien{transition:none}
    .t-pays-carte-lien:hover{transform:none}
}

/* --- LES SIX ATOUTS -----------------------------------------
     source : landing/partials/home/choose-us.blade.php */

.t-atouts{padding-block:5.5rem}
/* Le titre passe par `.t-entete`. Il ne reste ici que ce qui est propre
   a la bande sombre : sur ce fond, le titre est blanc et le surtitre
   sable — l'orange n'aurait pas assez de contraste sur du navy. */
.t-atouts .t-entete h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}

/* Trois colonnes fixes plutot qu'un `auto-fit` : avec six atouts,
   `auto-fit` donne 3+3 sur grand ecran mais 2+2+2 juste en dessous, et
   la rangee orpheline saute a l'oeil. Trois puis deux puis une, c'est
   une degradation qu'on maitrise. */
.t-atouts-grille{
    display:grid;gap:1.5rem;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:991px){.t-atouts-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.t-atouts-grille{grid-template-columns:minmax(0,1fr)}}

.t-atout{
    padding:2rem;border-radius:var(--t-rayon-carte,18px);
    background:#fff;border:0;
    /* Sur fond sombre, une carte blanche n'a pas besoin d'ombre pour se
       detacher : le contraste suffit. On en met une tres faible
       uniquement pour lui donner une epaisseur. */
    box-shadow:0 18px 40px rgba(0,0,0,.18);
    transition:transform .32s cubic-bezier(.2,0,0,1),box-shadow .32s cubic-bezier(.2,0,0,1);
}
.t-atout:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(0,0,0,.26)}
/* Le texte des cartes reste sombre : elles sont blanches, la bande ne
   doit pas les repeindre. */
.t-bande-sombre .t-atout h3{color:var(--t-encre,#14224A)}
.t-bande-sombre .t-atout p{color:var(--t-attenue,#5F6B80)}

/* La pastille d'icone. Sa teinte designe une FAMILLE — identite, argent,
   langue, assistance — et se lit avant le titre. Quatre familles, pas six :
   au-dela, la couleur cesse de classer et se met a decorer. */
/* RONDE, comme dans la reference — et non un carre arrondi. Le rond est
   ce qui distingue le plus vite cette famille de gabarits. */
.t-atout-picto{
    display:grid;place-items:center;
    inline-size:4.4rem;block-size:4.4rem;border-radius:50%;
    margin-block-end:1.5rem;
}
.t-atout-picto svg{inline-size:2rem;block-size:2rem}
.t-atout-picto.est-identite{background:#E7EBF5;color:#2C3D6B}
.t-atout-picto.est-argent  {background:var(--t-orange-pale,#FEEFDD);color:var(--t-orange-fonce,#E0740F)}
.t-atout-picto.est-langue  {background:var(--t-acquis-pale,#E1F5EE);color:var(--t-acquis,#12A277)}
.t-atout-picto.est-aide    {background:#F6EEDD;color:#A9772B}

.t-atout h3{font-size:1.1875rem;margin:0 0 .6rem}
.t-atout p{margin:0;font-size:.9375rem;line-height:1.65;color:var(--t-attenue,#5F6B80)}

@media (prefers-reduced-motion:reduce){
    .t-atout{transition:none}
    .t-atout:hover{transform:none}
}


/* --- LA CONFIANCE ------------------------------------------
     source : landing/partials/home/confiance.blade.php */

.t-confiance{padding-block:3.5rem}
.t-confiance-cadre{
    position:relative;overflow:hidden;
    display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center;
    padding:3.5rem 3.25rem;border-radius:1.9rem;
    background:var(--t-navy,#0D1A33);color:#fff;
}
/* Deux lueurs radiales aux angles opposes : elles donnent au bloc une
   profondeur que l'aplat n'a pas, sans qu'on voie d'ou vient la lumiere. */
.t-confiance-cadre::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(80% 120% at 100% 0, rgba(245,130,31,.17), transparent 55%),
        radial-gradient(60% 90% at 0 100%, rgba(18,162,119,.15), transparent 55%);
}
.t-confiance-texte,.t-confiance-citation{position:relative;z-index:1}

.t-confiance-texte h2{color:#fff;font-size:clamp(1.6rem,2.8vw,2.2rem);margin:.5rem 0 .9rem}
.t-confiance-intro{color:#C4CDDD;margin:0;line-height:1.7;max-inline-size:44ch}

.t-confiance-points{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.t-confiance-points li{display:flex;gap:.85rem;align-items:flex-start}
.t-confiance-coche{
    flex:none;display:grid;place-items:center;
    inline-size:1.65rem;block-size:1.65rem;border-radius:50%;
    background:rgba(18,162,119,.22);color:#4FD6A6;margin-block-start:.15rem;
}
.t-confiance-coche svg{inline-size:.95rem;block-size:.95rem}
.t-confiance-points strong{display:block;font-family:'Poppins',system-ui,sans-serif;font-size:1rem;font-weight:600}
.t-confiance-points span{display:block;font-size:.875rem;line-height:1.55;color:#AEB9CC;margin-block-start:.15rem}

.t-confiance-citation{
    margin:0;padding:1.75rem;border-radius:1.25rem;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.t-confiance-citation blockquote{
    margin:0;font-family:'Poppins',system-ui,sans-serif;font-style:italic;
    font-size:1.45rem;line-height:1.45;color:#F4EEE3;
}
.t-confiance-citation figcaption{
    margin-block-start:.9rem;font-size:.6875rem;letter-spacing:.16em;
    text-transform:uppercase;color:#8FA6BE;
}

@media (max-width:900px){
    .t-confiance-cadre{grid-template-columns:1fr;padding:2.25rem 1.75rem}
}


/* --- LES BADGES DE MAGASIN ---------------------------------------
     source : landing/partials/magasins.blade.php

   Noirs, comme les badges officiels des deux plateformes : c'est la
   forme que tout le monde reconnait sans la lire. On ne les repeint pas
   aux couleurs de la marque — ce sont des reperes, pas des elements de
   notre identite.

   Les deux sont identiques. Celui dont l'adresse n'est pas encore
   renseignee n'est pas cliquable, sans que rien ne le signale. */
.t-magasins{display:flex;flex-wrap:wrap;gap:.75rem}
.t-magasins.est-centre{justify-content:center}

.t-magasin{
    display:inline-flex;align-items:center;gap:.7rem;
    background:#111827;color:#fff;
    padding:.7rem 1.25rem;
    border-radius:var(--t-rayon-pastille,999px);
    text-decoration:none;
    transition:transform .32s cubic-bezier(.2,0,0,1),background-color .32s cubic-bezier(.2,0,0,1);
}
.t-magasin:hover{background:#1d2537;color:#fff;transform:translateY(-2px)}
.t-magasin:active{transform:translateY(0)}
.t-magasin:focus-visible{outline:3px solid var(--t-orange,#F5821F);outline-offset:3px}
.t-magasin svg{inline-size:1.45rem;block-size:1.45rem;flex:none}
.t-magasin small{display:block;font-size:.6875rem;opacity:.78;line-height:1.2}
.t-magasin b{display:block;font-size:.9375rem;font-weight:600;line-height:1.25}

@media (prefers-reduced-motion:reduce){
    .t-magasin{transition:none}
    .t-magasin:hover{transform:none}
}


/* --- L'INFOLETTRE ------------------------------------------------
     source : landing/partials/infolettre.blade.php

   Transposition du gabarit fourni : carte blanche a deux colonnes, pastille
   d'icone degradee, formulaire a droite, bande de dunes en signature.
   Les valeurs sont celles du gabarit, a l'unite pres. */

.t-info{
    --navy-1:#0A1E40;
    --navy-2:#16315C;
    --navy-3:#2A4A78;
    --info-encre:#101828;
    --info-attenue:#5A6478;
    --info-orange:#F5842A;
    --info-orange-2:#FF9A47;
    --info-trait:#E7EAF0;
}

.t-infolettre-zone{
    background:#EEF1F7;
    padding-block:3.5rem;
    position:relative;z-index:2;
}

.t-info-carte{
    --navy-1:#0A1E40;
    --navy-2:#16315C;
    --navy-3:#2A4A78;
    --info-encre:#101828;
    --info-attenue:#5A6478;
    --info-orange:#F5842A;
    --info-orange-2:#FF9A47;
    --info-trait:#E7EAF0;

    inline-size:100%;
    max-inline-size:1040px;
    margin-inline:auto;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 2px 4px rgba(16,24,40,.04),0 30px 70px -24px rgba(10,30,64,.35);
    border:1px solid rgba(16,24,40,.05);
}

.t-info-corps{
    padding:52px 56px 40px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:48px;
    align-items:center;
}

/* --- Colonne gauche --- */
.t-info-gauche{display:flex;gap:20px;align-items:flex-start}

.t-info-pastille{
    flex:none;
    inline-size:60px;block-size:60px;
    border-radius:16px;
    background:linear-gradient(150deg,var(--navy-2),var(--navy-3));
    display:grid;place-items:center;
    box-shadow:0 10px 22px -8px rgba(22,49,92,.55),inset 0 1px 0 rgba(255,255,255,.18);
}

.t-info-surtitre{
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    font-size:12px;font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--info-orange);
    margin:2px 0 8px;
}
.t-info-gauche h2{
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    margin:0 0 12px;
    font-size:30px;font-weight:800;
    letter-spacing:-.02em;
    color:var(--info-encre);
    line-height:1.1;
}
.t-info-gauche p{
    margin:0;
    font-family:'Inter',system-ui,sans-serif;
    font-size:16px;line-height:1.6;
    color:var(--info-attenue);
    max-inline-size:42ch;
}

/* --- Colonne droite : le formulaire --- */
.t-info-forme{
    display:flex;align-items:center;
    background:#fff;
    border:1.5px solid var(--info-trait);
    border-radius:16px;
    padding:8px 8px 8px 22px;
    transition:border-color .18s ease,box-shadow .18s ease;
}
/* La bague de focus se pose sur le CONTENANT : sur le champ seul, elle
   apparaitrait a l'interieur de la barre. */
.t-info-forme:focus-within{
    border-color:var(--info-orange);
    box-shadow:0 0 0 4px rgba(245,132,42,.14);
}
.t-info-forme input{
    flex:1;min-inline-size:0;
    border:0;outline:0;background:transparent;
    font-family:'Inter',system-ui,sans-serif;
    font-size:16px;color:var(--info-encre);
    padding-block:14px;
}
.t-info-forme input::placeholder{color:#98A2B3;opacity:1}

.t-info-envoi{
    flex:none;
    inline-size:48px;block-size:48px;
    border:0;cursor:pointer;
    border-radius:12px;
    background:linear-gradient(150deg,var(--info-orange),var(--info-orange-2));
    display:grid;place-items:center;
    box-shadow:0 8px 18px -6px rgba(245,132,42,.6);
    transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.t-info-envoi svg{transition:transform .16s ease}
.t-info-envoi:hover{filter:brightness(1.05);box-shadow:0 12px 24px -6px rgba(245,132,42,.7)}
.t-info-envoi:hover svg{transform:translate(2px,-2px)}
.t-info-envoi:active{transform:translateY(1px)}
.t-info-envoi:focus-visible{outline:2px solid var(--info-orange);outline-offset:3px}

.t-info-consentement{
    margin:14px 4px 0;
    font-family:'Inter',system-ui,sans-serif;
    font-size:12.5px;color:#98A2B3;line-height:1.5;
}

/* --- La signature --- */
.t-info-paysage{line-height:0;margin-block-start:8px}
.t-info-paysage svg{display:block;inline-size:100%;block-size:auto}

@media (max-width:780px){
    .t-info-corps{
        grid-template-columns:1fr;
        gap:28px;
        padding:40px 30px 30px;
    }
    .t-info-gauche h2{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
    .t-info-envoi,.t-info-envoi svg,.t-info-forme{transition:none}
    .t-info-envoi:hover svg{transform:none}
    .t-info-envoi:active{transform:none}
}

/* Le pied de page n'a plus a remonter : la carte ne mord plus dessus. */
.t-pied{padding-block-start:0}

/* --- LE MENU DU BANDEAU ------------------------------------------
     source : layouts/landing/partials/_header.blade.php

   Les rubriques a sous-menu sont des BOUTONS et non des liens : elles
   n'emmenent nulle part, elles ouvrent. Un lien qui ne navigue pas est
   annonce comme un lien par les lecteurs d'ecran, et ne repond pas a la
   barre d'espace. */

.t-menu-deroulant{position:relative}

/* Meme couleur et meme graisse que les liens voisins : le bouton
   n'heritait de rien et sortait plus pale, ce qui le faisait passer pour
   une rubrique desactivee. */
.t-menu-declencheur{
    display:inline-flex;align-items:center;gap:.35rem;
    background:transparent;border:0;padding:0;
    font-family:'Poppins',system-ui,sans-serif;
    font-size:15px;font-weight:600;
    color:rgba(255,255,255,.82);cursor:pointer;
}
.t-menu-declencheur:hover,
.t-menu-deroulant.est-ouvert .t-menu-declencheur{color:var(--t-orange,#F5821F)}
.t-menu-declencheur svg{
    inline-size:1rem;block-size:1rem;
    transition:transform .32s cubic-bezier(.2,0,0,1);
}
.t-menu-deroulant.est-ouvert .t-menu-declencheur svg{transform:rotate(180deg)}
.t-menu-declencheur:focus-visible{outline:2px solid var(--t-orange,#F5821F);outline-offset:4px;border-radius:4px}

.t-menu-panneau{
    position:absolute;inset-block-start:calc(100% + 1rem);inset-inline-start:-1rem;
    min-inline-size:15rem;
    background:#fff;
    border-radius:var(--t-rayon-carte,18px);
    padding:.6rem;
    box-shadow:0 2px 6px rgba(20,34,74,.06),0 22px 50px rgba(20,34,74,.16);
    /* Ferme par defaut, et retire du parcours clavier tant qu'il l'est :
       `visibility` le fait, `opacity` seule laisserait les liens
       atteignables a la tabulation sans qu'on les voie. */
    opacity:0;visibility:hidden;
    transform:translateY(-.5rem);
    transition:opacity .28s cubic-bezier(.2,0,0,1),
               transform .28s cubic-bezier(.2,0,0,1),
               visibility .28s;
    z-index:40;
}
/* Un pont invisible entre le bouton et le panneau : sans lui, la souris
   traverse un vide d'un rem et le panneau se referme sous le curseur. */
.t-menu-panneau::before{
    content:"";position:absolute;
    inset-block-start:-1rem;inset-inline:0;block-size:1rem;
}
.t-menu-deroulant:hover .t-menu-panneau,
.t-menu-deroulant.est-ouvert .t-menu-panneau{
    opacity:1;visibility:visible;transform:translateY(0);
}

.t-menu-panneau ul{list-style:none;margin:0;padding:0}
/* `.header` en tete du selecteur : le gabarit colore TOUS les liens du
   bandeau en blanc, ce qui rendait ces entrees blanches sur blanc. */
.header .t-menu-panneau a{
    display:block;
    padding:.65rem .9rem;
    border-radius:10px;
    color:var(--t-encre,#14224A);
    font-size:.9375rem;text-decoration:none;
    transition:background-color .2s ease,color .2s ease;
}
.header .t-menu-panneau a:hover{background:var(--t-orange-pale,#FEEFDD);color:var(--t-orange-fonce,#E0740F)}
.header .t-menu-panneau a:focus-visible{outline:2px solid var(--t-orange,#F5821F);outline-offset:-2px}

/* --- Le tiroir mobile --------------------------------------------
   Pas de sous-menu a deplier : tout est visible d'un coup. Sur un
   telephone, un accordeon a trois niveaux coute plus de gestes qu'il
   n'economise de hauteur. */
.t-menu-tiroir .t-tiroir-groupe{display:block;margin-block-start:1.25rem}
.t-menu-tiroir .t-tiroir-titre{
    display:block;
    font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--t-orange-fonce,#E0740F);
    margin-block-end:.5rem;
}
.t-menu-tiroir .t-tiroir-groupe ul{list-style:none;margin:0;padding:0}
.t-menu-tiroir .t-tiroir-groupe a{display:block;padding-block:.5rem}

@media (prefers-reduced-motion:reduce){
    .t-menu-panneau,.t-menu-declencheur svg{transition:none}
}

/* --- COMMENT CA MARCHE -------------------------------------------
     source : landing/partials/home/how-it-works.blade.php

   Trois cartes egales sous un en-tete centre. Le numero est une PASTILLE
   sable, comme les icones de la bande sombre : c'est le meme role — coiffer
   une carte — donc la meme forme. */

.t-etapes{background:var(--t-gris,#F8F8F8)}

.t-etapes-grille{
    list-style:none;margin:0;padding:0;
    display:grid;gap:1.5rem;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){.t-etapes-grille{grid-template-columns:minmax(0,1fr)}}

.t-etape{
    background:#fff;
    border-radius:var(--t-rayon-carte,18px);
    padding:2rem;
    box-shadow:0 2px 4px rgba(20,34,74,.04),0 12px 32px rgba(20,34,74,.06);
    transition:transform .32s cubic-bezier(.2,0,0,1),box-shadow .32s cubic-bezier(.2,0,0,1);
}
.t-etape:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(20,34,74,.05),0 22px 48px rgba(20,34,74,.11)}

.t-etape-numero{
    display:grid;place-items:center;
    inline-size:4.4rem;block-size:4.4rem;border-radius:50%;
    background:var(--t-sable,#E6D2B4);
    color:var(--t-encre,#14224A);
    font-family:'Poppins',system-ui,sans-serif;
    font-size:1.25rem;font-weight:600;
    font-variant-numeric:tabular-nums;
    margin-block-end:1.5rem;
}
.t-etape h3{font-size:1.1875rem;margin:0 0 .6rem;color:var(--t-encre,#14224A)}
.t-etape p{margin:0;font-size:.9375rem;line-height:1.65;color:var(--t-attenue,#5F6B80)}

@media (prefers-reduced-motion:reduce){
    .t-etape{transition:none}
    .t-etape:hover{transform:none}
}

/* --- LES SERVICES ------------------------------------------------
     source : landing/partials/home/feature.blade.php

   Des cartes egales. Le gabarit alternait deux mises en page selon la
   parite du rang : l'oeil devait reapprendre la carte a chaque ligne. */

.t-services-grille{
    display:grid;gap:1.5rem;
    grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1100px){.t-services-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.t-services-grille{grid-template-columns:minmax(0,1fr)}}

.t-service{
    background:#fff;
    border-radius:var(--t-rayon-carte,18px);
    overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 2px 4px rgba(20,34,74,.04),0 12px 32px rgba(20,34,74,.06);
    transition:transform .32s cubic-bezier(.2,0,0,1),box-shadow .32s cubic-bezier(.2,0,0,1);
}
.t-service:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(20,34,74,.05),0 22px 48px rgba(20,34,74,.11)}

/* Le fond creme derriere la maquette : elle est sur fond transparent, et
   poser un ecran clair sur du blanc pur le fait flotter sans limite. */
.t-service-image{
    background:linear-gradient(160deg,var(--t-creme,#FFF7EE),var(--t-sable-pale,#F6EFE4));
    padding:1.75rem 1.75rem 0;
    display:flex;justify-content:center;align-items:flex-end;
    block-size:13rem;
}
.t-service-image img{
    inline-size:auto;max-inline-size:100%;
    block-size:100%;object-fit:contain;object-position:bottom;
    display:block;
}

.t-service-texte{padding:1.75rem}
.t-service h3{font-size:1.0625rem;margin:0 0 .5rem;color:var(--t-encre,#14224A)}
.t-service p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--t-attenue,#5F6B80)}

@media (prefers-reduced-motion:reduce){
    .t-service{transition:none}
    .t-service:hover{transform:none}
}

/* --- LA PASTILLE DU BALISAGE `##texte##` --------------------------
   Le gabarit la rend en `bg-primary text-white` : du blanc sur l'orange
   de la marque, soit 2,59:1 — tres loin du seuil de 4,5. Le navy sur ce
   meme orange donne 5,94:1.

   La regle vaut PARTOUT, pas seulement sur la bande sombre : c'est le
   meme balisage, saisi dans la meme administration, et il ne doit jamais
   produire un texte illisible. */
.bg-primary.text-white,
h1 .bg-primary, h2 .bg-primary, h3 .bg-primary{
    background:var(--t-orange,#F5821F) !important;
    color:var(--t-encre,#14224A) !important;
    padding-inline:.28em;
    border-radius:.22em;
}
/* Sur la bande sombre, la pastille redevient du simple texte orange :
   un aplat colore y ferait surligneur. */
.t-bande-sombre .bg-primary,
.t-bande-sombre h2 .bg-primary{
    background:transparent !important;
    color:var(--t-orange,#F5821F) !important;
    padding:0 !important;
}

/* --- LE BANDEAU DE TELECHARGEMENT --------------------------------
     source : landing/partials/home/download.blade.php

   Le meme panneau que « Devenez agent » : meme rayon, meme ombre, meme
   fond navy. Deux blocs qui remplissent la meme fonction — un appel a
   l'action pleine largeur — n'ont aucune raison d'avoir deux dessins. */

.t-telechargement-panneau{
    background:linear-gradient(158deg,var(--t-encre,#14224A),var(--t-navy,#0D1A33));
    border-radius:var(--t-rayon-panneau,28px);
    padding:clamp(2.25rem,4vw,3.5rem);
    color:#fff;
    display:grid;gap:2rem;
    align-items:center;
}
/* Deux colonnes SEULEMENT s'il y a une image : sans elle, le texte centre
   sur toute la largeur vaut mieux qu'une colonne vide a droite. */
.t-telechargement-panneau.a-une-image{grid-template-columns:1.15fr .85fr}
.t-telechargement-panneau:not(.a-une-image) .t-telechargement-texte{
    text-align:center;max-inline-size:52ch;margin-inline:auto;
}
.t-telechargement-panneau:not(.a-une-image) .t-magasins{justify-content:center}

.t-telechargement-texte h2{
    color:#fff;
    font-size:clamp(1.75rem,3.2vw,2.6rem);
    margin:0 0 .9rem;
}
.t-telechargement-texte h2 span{
    color:var(--t-orange,#F5821F) !important;
    background:transparent !important;padding:0 !important;
}
.t-telechargement-texte p{color:rgba(255,255,255,.72);margin:0 0 2rem;line-height:1.7}

.t-telechargement-image{margin:0}
.t-telechargement-image img{inline-size:100%;block-size:auto;display:block}

@media (max-width:900px){
    .t-telechargement-panneau.a-une-image{grid-template-columns:1fr}
}

/* Les badges sur fond sombre. Noirs, ils se fondaient dans le panneau navy :
   on les passe en surface translucide avec un lisere clair, comme le font
   les versions blanches des badges officiels. */
.t-telechargement-panneau .t-magasin,
.t-bande-sombre .t-magasin,
.t-agent-cadre .t-magasin{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
}
.t-telechargement-panneau .t-magasin:hover,
.t-bande-sombre .t-magasin:hover,
.t-agent-cadre .t-magasin:hover{
    background:rgba(255,255,255,.2);
    color:#fff;
}

/* --- LES PAGES DU MENU -------------------------------------------
     source : landing/page.blade.php

   Sept pages, un seul gabarit. Elles reutilisent les composants de
   l'accueil — cartes, etapes, coches, panneau — et n'ajoutent ici que ce
   qui leur est propre. */

.t-page-annonce{
    background:linear-gradient(180deg,var(--t-creme,#FFF7EE),#fff 88%);
    padding-block:5rem 2rem;
}
.t-page-annonce h1{
    font-size:clamp(2.1rem,4.8vw,3.6rem);
    line-height:1.08;
    letter-spacing:-1.2px;
    margin:.6rem 0 1rem;
}
.t-page-annonce .t-entete{margin-block-end:0}

/* Quatre colonnes et non trois : les pages portent quatre cartes, et une
   grille de trois y laisserait une orpheline sur la deuxieme rangee.

   Les cartes n'ont pas de fond sombre derriere elles : elles prennent
   l'ombre des cartes claires, pas celle de la bande. */
.t-page-cartes{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.t-page-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.t-page-cartes{grid-template-columns:minmax(0,1fr)}}
.t-page-cartes .t-atout{box-shadow:0 2px 4px rgba(20,34,74,.04),0 12px 32px rgba(20,34,74,.06)}
.t-page-cartes .t-atout:hover{box-shadow:0 4px 8px rgba(20,34,74,.05),0 22px 48px rgba(20,34,74,.11)}

/* Le bloc « points » : le propos a gauche, la liste a droite. */
.t-page-points{
    display:grid;grid-template-columns:1fr 1fr;gap:3rem;
    align-items:start;
}
.t-page-points h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 1rem}
.t-page-points > div > p{color:var(--t-attenue,#5F6B80);margin:0;line-height:1.7}
.t-page-points .t-confiance-points{margin:0}
.t-page-points .t-confiance-points strong{color:var(--t-encre,#14224A)}

@media (max-width:900px){
    .t-page-points{grid-template-columns:1fr;gap:2rem}
}

/* ====================================================================
   LES REVELATIONS, EN TROIS GESTES AU LIEU D'UN

   La page entiere montait de seize pixels avec la meme duree et la meme
   courbe : quarante-cinq elements sur cinquante et un. C'est le tic le
   plus reconnaissable d'une page assemblee vite — tout bouge pareil,
   donc rien ne bouge vraiment.

   Trois gestes, choisis par ce que fait l'element :

     t-devoile   les titres. Un volet qui s'ouvre vers le bas, sans
                 deplacement. Un titre qui glisse attire l'oeil sur son
                 mouvement ; un titre qui se decouvre attire l'oeil sur
                 le mot.
     t-monte     les cartes. Une montee TRES courte avec une echelle qui
                 se referme — l'objet arrive au lieu de defiler.
     t-cote      ce qui borde. Vient du bord dont il est le plus proche.

   Les durees different aussi : entree rapide, installation lente. Une
   duree unique partout est le meme defaut que la courbe unique.
   ==================================================================== */

[data-aos="t-devoile"]{
    opacity:0;
    clip-path:inset(0 0 100% 0);
    transition-property:opacity,clip-path;
    transition-timing-function:cubic-bezier(.16,1,.3,1);
}
[data-aos="t-devoile"].aos-animate{
    opacity:1;
    clip-path:inset(0 0 -20% 0);
}

[data-aos="t-monte"]{
    opacity:0;
    transform:translateY(14px) scale(.985);
    transition-property:opacity,transform;
    transition-timing-function:cubic-bezier(.16,1,.3,1);
}
[data-aos="t-monte"].aos-animate{
    opacity:1;
    transform:translateY(0) scale(1);
}

[data-aos="t-cote-gauche"],
[data-aos="t-cote-droit"]{
    opacity:0;
    transition-property:opacity,transform;
    transition-timing-function:cubic-bezier(.16,1,.3,1);
}
[data-aos="t-cote-gauche"]{transform:translateX(-24px)}
[data-aos="t-cote-droit"]{transform:translateX(24px)}
[data-aos="t-cote-gauche"].aos-animate,
[data-aos="t-cote-droit"].aos-animate{
    opacity:1;transform:translateX(0);
}

/* Qui demande moins de mouvement n'en recoit aucun — AOS est deja coupe
   dans main.js, ceci couvre le cas ou il serait actif malgre tout. */
@media (prefers-reduced-motion:reduce){
    [data-aos^="t-"]{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
}

/* ====================================================================
   L'EN-TETE DE SECTION, EN DEUX VERSIONS

   Cinq sections portaient le meme en-tete centre. Repete cinq fois, un
   bloc centre cesse d'etre une composition et devient un gabarit.

   La version calee a gauche porte un FILET au-dessus du surtitre : il
   donne au bloc une arete a laquelle s'aligner, et rappelle qu'il y a
   une grille sous la page.
   ==================================================================== */
.t-entete.est-calee{
    text-align:start;
    max-inline-size:none;
    margin-inline:0;
    display:grid;
    align-items:end;
    gap:1rem 4rem;
}

/* Avec un chapeau : le titre a gauche, le chapeau a droite. */
.t-entete.est-calee:has(p){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.t-entete.est-calee:has(p) .t-surtitre,
.t-entete.est-calee:has(p) h2{grid-column:1}
.t-entete.est-calee:has(p) p{grid-column:2;margin:0;max-inline-size:46ch}

/* Sans chapeau : le surtitre devient une note de marge, etroite, et le titre
   prend toute la largeur restante. C'est la disposition d'un ouvrage, pas
   celle d'une diapositive. */
.t-entete.est-calee:not(:has(p)){grid-template-columns:minmax(0,12rem) minmax(0,1fr)}
.t-entete.est-calee:not(:has(p)) .t-surtitre{grid-column:1}
.t-entete.est-calee:not(:has(p)) h2{grid-column:2;margin:0}

/* Le filet donne au bloc une arete a laquelle s'aligner, et rappelle qu'il y
   a une grille sous la page. */
.t-entete.est-calee .t-surtitre{
    padding-block-start:1.1rem;
    border-block-start:1px solid var(--t-trait,#ECEEF3);
    align-self:start;
}

.t-bande-sombre .t-entete.est-calee .t-surtitre{border-block-start-color:rgba(255,255,255,.16)}

@media (max-width:900px){
    .t-entete.est-calee,
    .t-entete.est-calee:has(p),
    .t-entete.est-calee:not(:has(p)){grid-template-columns:minmax(0,1fr);gap:.75rem}
    .t-entete.est-calee :is(.t-surtitre,h2,p){grid-column:1}
}

/* ====================================================================
   LES FINITIONS

   Aucune n'etait posee. Prises une par une elles ne se remarquent pas ;
   c'est leur absence qui se remarque, comme un vetement bien coupe dont
   on ne voit pas les coutures.
   ==================================================================== */

/* La selection : le navigateur pose du bleu systeme par defaut, la seule
   couleur de la page que nous n'aurions pas choisie. */
::selection{background:var(--t-orange,#F5821F);color:var(--t-encre,#14224A)}

/* La barre de defilement, sur les navigateurs qui la laissent styler. */
@supports selector(::-webkit-scrollbar){
    ::-webkit-scrollbar{inline-size:11px;block-size:11px}
    ::-webkit-scrollbar-track{background:var(--t-creme,#FFF7EE)}
    ::-webkit-scrollbar-thumb{
        background:#D9D2C7;border-radius:999px;
        border:3px solid var(--t-creme,#FFF7EE);
    }
    ::-webkit-scrollbar-thumb:hover{background:#C4BBAC}
}
html{scrollbar-color:#D9D2C7 var(--t-creme,#FFF7EE);scrollbar-width:thin}

/* Un grain tres fin sur les aplats sombres. Un aplat numerique parfait
   parait plat ; trois pour cent de bruit lui donnent une matiere, sans
   qu'on sache dire ce qui a change. Le motif est genere, pas charge. */
.t-bande-sombre,
.t-agent-cadre,
.t-telechargement-panneau,
.t-pays{position:relative}
.t-bande-sombre::after,
.t-agent-cadre::after,
.t-telechargement-panneau::after,
.t-pays::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    opacity:.035;
    /* Les panneaux sont arrondis : sans cela le grain deborderait en angle
       droit par-dessus la courbe. */
    border-radius:inherit;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)'/%3E%3C/svg%3E");
}
/* Le grain ne doit pas passer par-dessus le contenu. */
.t-bande-sombre > *,
.t-agent-cadre > *,
.t-telechargement-panneau > *,
.t-pays > *{position:relative;z-index:1}

/* ====================================================================
   L'EQUILIBRE DES LIGNES

   `text-wrap:balance` n'etait pose que sur les titres de section. Partout
   ailleurs le navigateur coupait ou il pouvait — d'ou ces titres de carte
   a trois mots sur la premiere ligne et un seul sur la seconde. Le mot
   orphelin est le detail qui trahit une page non relue.

   `pretty` fait le meme travail sur les paragraphes, en moins strict :
   il evite l'orpheline de fin sans redistribuer tout le bloc.
   ==================================================================== */
h1,h2,h3,h4,
.t-hero-titre,.t-metier h3,.t-atout h3,.t-etape h3,.t-service h3,
.t-page-carte h3,.t-info-titre,.t-telechargement-panneau h2{
    text-wrap:balance;
}
p,.t-intro,.t-metier p,.t-atout p,.t-etape p,.t-service p,figcaption{
    text-wrap:pretty;
}

/* La chasse se resserre a mesure que le corps grandit : a 14px un titre
   serre devient illisible, a 56px un titre normal parait delave. Une
   valeur unique est forcement fausse quelque part. */
.t-hero-titre{letter-spacing:-.03em}
h2{letter-spacing:-.02em}
.t-metier h3,.t-atout h3,.t-etape h3,.t-service h3{letter-spacing:-.01em}
.t-surtitre{letter-spacing:.14em}

/* ====================================================================
   LA COURBE, PAR GESTE

   AOS pose sa propre courbe avec un selecteur plus specifique que le
   notre (`body[data-aos-easing] [data-aos]`), donc `ease-out-cubic`
   ecrasait les trois courbes ci-dessus sans rien dire. On remonte au
   meme poids : notre feuille est chargee apres la sienne, l'ordre
   tranche en notre faveur.

   Trois courbes pour trois intentions :
     le volet d'un titre s'ouvre vite puis se pose tres lentement (expo) ;
     une carte arrive franchement et s'arrete net ;
     ce qui vient du bord glisse, donc demarre plus doucement.
   ==================================================================== */
body[data-aos-easing] [data-aos="t-devoile"]{
    transition-timing-function:cubic-bezier(.16,1,.3,1);
}
body[data-aos-easing] [data-aos="t-monte"]{
    transition-timing-function:cubic-bezier(.22,.61,.36,1);
}
body[data-aos-easing] [data-aos="t-cote-gauche"],
body[data-aos-easing] [data-aos="t-cote-droit"]{
    transition-timing-function:cubic-bezier(.33,.9,.4,1);
}