/*
 * Composants propres à WordPress, construits sur les variables de theme.css.
 *
 * Règle du projet : theme.css n'est jamais modifié. Ce fichier ne fait
 * qu'habiller ce que WordPress, WooCommerce et Tutor ajoutent au HTML
 * (listes de menu, champs de formulaire, notices, pagination…), en
 * réutilisant les mêmes tokens de couleur, d'espacement et de typographie.
 */

/* ---------- VESTIGES DU PROTOTYPE EN PAGE UNIQUE ---------- */
/* La maquette basculait entre ses écrans avec .page / .page.on :
     .page    { display:none }
     .page.on { display:block }
   WordPress, lui, ajoute la classe « page » au <body> de chaque page —
   la règle masquait donc le document entier. On la neutralise ici plutôt
   que de toucher à theme.css, qui reste la copie exacte de la maquette. */
body.page{display:block}
.lp .block .cta-row a{
  width: 100%;
}

/* ---------- ACCESSIBILITÉ ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:-9999px;z-index:1000}
.skip-link:focus{inset-inline-start:12px;top:12px;width:auto;height:auto;clip:auto;clip-path:none;
  background:#fff;color:var(--ink);padding:12px 20px;border:1px solid var(--gold);border-radius:3px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- APPARITION AU DÉFILEMENT : TOUJOURS DÉGRADABLE ---------- */
/* theme.css masque les blocs (.rv { opacity:0 }) en attendant le script.
   Si le JavaScript ne tourne pas, la page entière resterait blanche : on
   conditionne donc le voile à la classe posée par le script lui-même. */
html:not(.dramine-js) .rv{opacity:1;transform:none}

/* Filet de sécurité : au-delà du délai fixé dans theme.js, on révèle tout,
   même si l'observateur n'a jamais été déclenché (onglet en arrière-plan,
   erreur JavaScript, script tiers bloquant). */
html.dramine-reveal-all .rv{opacity:1;transform:none;transition:none}

/* Les animations d'apparition ne doivent pas gêner. */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- MENUS WORDPRESS ---------- */
/* wp_nav_menu ajoute des <ul>/<li> que la maquette n'avait pas. */
.nav-links,.drawer-links{list-style:none;margin:0;padding:0}
.nav-links li{list-style:none}
.nav-links .current-menu-item>a,.nav-links .current_page_item>a{color:var(--gold)}
.nav-logo{display:inline-flex;align-items:center}
.drawer li{list-style:none}
.drawer li>a,.drawer>a{display:block}
.drawer .current-menu-item>a{color:var(--gold)}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{list-style:none}
.foot-col li>a{display:block;font-size:13.5px;color:var(--ink2);font-weight:500;margin-bottom:9px}
.foot-col li>a:hover{color:var(--gold)}
.foot-brand a{display:inline-block}

/* ---------- BARRE DE NAVIGATION ---------- */
/* La maquette dimensionnait sa navigation pour un corps de texte à 16px.
   Le site étant passé à 24px, ces 14,5px paraissaient minuscules et la
   barre semblait vide : on remonte l'échelle de la navigation dans les
   mêmes proportions, sans toucher à theme.css. */
/* Le contenu de la barre est borné à 1280px : au-delà, la maquette
   envoyait le logo et les boutons se coller aux deux bords de l'écran,
   avec 400px de vide au milieu. Le padding latéral absorbe le surplus. */
.nav,
.nav.stuck{padding-inline:max(44px, calc((100% - 1280px) / 2))}
.nav{padding-block:15px}
/* Le bornage est repete sur .stuck : theme.css y remet un padding raccourci
   (10px 40px) dont la specificite depasse celle de .nav seul, ce qui
   elargissait brusquement la barre des qu'on defilait. */
.nav.stuck{padding-block:10px}
.nav-links{gap:34px}
.nav-links a{font-size:17px}
/* Le fichier du logo mesure 128x43 : on s'arrête à sa taille native pour
   ne pas l'agrandir au-delà et le rendre flou. */
.nav .logo{height:42px}
.nav.stuck .logo{height:34px}

/* ---------- COMPTE DANS LA NAVIGATION ---------- */
/* L'ancienne version reprenait la pilule segmentée du sélecteur AR/FR de
   la maquette : un cadre arrondi enfermant deux liens minuscules, ce qui
   lisait mal et n'avait plus de raison d'être une fois le sélecteur retiré.
   On revient à la hiérarchie habituelle d'un en-tête : un lien discret
   pour se connecter, un vrai bouton doré pour l'inscription. */
.nav-account{display:flex;align-items:center;gap:18px}
.nav-account a{transition:all .3s;white-space:nowrap}

/* Lien discret : même graisse et même couleur que les liens de navigation. */
.nav-account__link{font-size:16px;font-weight:500;color:var(--ink2);display:inline-flex;
  align-items:center;gap:9px}
.nav-account__link:hover{color:var(--gold)}

/* Bouton principal : reprend .btn-gold, en un cran plus compact. */
.nav-account__cta{font-size:15px;font-weight:700;line-height:1;padding:14px 26px;border-radius:999px;
  background:var(--gold);color:#fff;border:1px solid transparent}
.nav-account__cta:hover{background:var(--gold2);color:#fff;transform:translateY(-2px)}
.nav.stuck .nav-account__cta{padding:9px 22px}

/* Session ouverte : initiale dans une pastille, puis un lien de sortie
   détaché par un filet fin. */
.nav-account__avatar{width:28px;height:28px;border-radius:50%;background:var(--goldsoft);
  color:var(--gold2);display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0}
.nav-account__label{display:inline-block}
.nav-account__out{font-size:14px;font-weight:500;color:var(--ink3);
  border-inline-start:1px solid var(--line);padding-inline-start:18px}
.nav-account__out:hover{color:var(--gold2)}

/* ---------- TIROIR MOBILE ---------- */
.drawer{padding:96px 26px 30px}
.drawer li>a,.drawer>a{font-size:19px;padding:17px 0}
.drawer-account{margin-top:auto;padding-top:24px}
/* Dans le tiroir, les liens du compte ne sont pas des lignes de menu :
   on annule la bordure et le rythme vertical hérités de .drawer a. */
.nav-account--drawer{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0}
.nav-account--drawer a{border-bottom:0;padding:0}
.nav-account--drawer .nav-account__link{font-size:17px;line-height:1;justify-content:center;padding:15px 20px;
  border:1px solid var(--line);border-radius:999px}
.nav-account--drawer .nav-account__cta{font-size:16px;text-align:center;justify-content:center;
  display:flex;padding:14px 20px}
.nav-account--drawer .nav-account__out{border-inline-start:0;padding:0;text-align:center}

@media(max-width:860px){
  .nav,.nav.stuck{padding-block:12px;padding-inline:20px}
  .nav>.nav-account,.nav-right>.nav-account{display:none}
}

/* ---------- CONTENU LIBRE DE L'ÉDITEUR ---------- */
.dramine-prose{text-align:start}
.dramine-prose h2{font-size:clamp(22px,3.4vw,31px);font-weight:800;line-height:1.45;margin:34px 0 14px}
.dramine-prose h3{font-size:20px;font-weight:800;margin:28px 0 12px}
.dramine-prose h4{font-size:17px;font-weight:700;margin:22px 0 10px}
.dramine-prose p{font-size:16.5px;color:var(--ink2);font-weight:500;margin-bottom:16px}
.dramine-prose ul,.dramine-prose ol{margin:0 0 18px;padding-inline-start:22px;color:var(--ink2);font-weight:500}
.dramine-prose li{margin-bottom:8px}
.dramine-prose a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.dramine-prose a:hover{color:var(--gold)}
.dramine-prose strong,.dramine-prose b{color:var(--ink);font-weight:700}
.dramine-prose blockquote{border-inline-start:2px solid var(--gold);padding-inline-start:20px;margin:22px 0;
  color:var(--ink2);font-style:italic}
.dramine-prose img{border-radius:3px;margin:22px auto}
.dramine-prose figure{margin:22px 0}
.dramine-prose figcaption{font-size:12.5px;color:var(--ink3);text-align:center;padding-top:8px}
.dramine-prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.dramine-prose th,.dramine-prose td{border:1px solid var(--line);padding:11px 14px;text-align:start}
.dramine-prose th{background:var(--soft);font-weight:700}
.dramine-prose code{background:var(--soft);border:1px solid var(--line);border-radius:2px;padding:2px 6px;font-size:13px}
.dramine-prose pre{background:var(--soft);border:1px solid var(--line);border-radius:3px;padding:18px;
  overflow-x:auto;margin:22px 0}
.dramine-prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* ---------- LISTES SÉMANTIQUES DE LA MAQUETTE ---------- */
/* .bullets et .for-who deviennent des vraies listes : on retire les puces. */
.bullets{list-style:none;margin:8px 0 0;padding:0}
.bullets li{background:#fff;padding:15px 22px;font-size:15px;color:var(--ink2);font-weight:500;display:flex;gap:13px}
.bullets li b{color:var(--gold);font-weight:800;flex-shrink:0}
.for-who{list-style:none;margin:8px 0 0;padding:0}
.for-who li{border:1px solid var(--line);padding:18px 20px;font-size:14.5px;color:var(--ink2);font-weight:500;
  display:flex;gap:11px;align-items:flex-start}
.for-who li b{color:var(--gold)}
.q blockquote{margin:0}
.q blockquote p{font-size:24px;color:var(--ink2);font-weight:500;font-style:italic;margin-bottom:18px;min-height:152px}
.course h3 a,.mini h4 a,.other h5{color:inherit}
.course h3 a:hover{color:var(--gold2)}
.mini h4 a:hover{color:var(--gold2)}
.mini a.btn{margin-top:auto}
.mini{display:flex;flex-direction:column}

/* ---------- FILTRES / PUCES CLIQUABLES ---------- */
.dramine-filters{padding:34px 0 0;margin-bottom:0}
.chip{transition:all .3s}
a.chip:hover{border-color:var(--gold);color:var(--gold2)}
a.chip.is-on{background:var(--gold);border-color:var(--gold);color:#fff}

/* ---------- PAGE FORMATION : aligner .block sur .lp-sec ---------- */
/* Les sections ACF utilisent .wrap/.block ; sur une page formation elles
   doivent adopter la métrique .lp-sec de la maquette. */
.lp .wrap{max-width:960px}
.lp .block{padding:56px 0}
.lp .block h2{font-size:clamp(25px,4vw,38px);margin-bottom:16px}
.lp .block p{margin-bottom:14px; font-weight: 500;}
.lp .block+.block{border-top:1px solid var(--line)}
.lp-sec+.wrap .block:first-child{border-top:1px solid var(--line)}
.dramine-curriculum summary{gap:16px}
.dramine-curriculum summary .md{font-size:12.5px;color:var(--ink3);font-weight:400;margin-inline-start:auto;
  padding-inline-end:12px}
.dramine-curriculum .modules{gap:1px;background:var(--line);border-top:1px solid var(--line);border-radius:0}
.dramine-curriculum .mod .mt{display:flex;align-items:center;gap:10px}
.dramine-curriculum .mod a{color:inherit}
.dramine-curriculum .mod a:hover{color:var(--gold2)}
.visual a{display:block}

/* ---------- PAGES D'AUTHENTIFICATION ---------- */
.auth-wrap{padding-top:110px}
.auth-form{max-width:440px}
.auth-form .btn{margin-top:6px}
.auth-notice{border:1px solid var(--line);border-radius:2px;padding:14px 16px;margin-bottom:20px;font-size:13.5px;
  font-weight:500;line-height:1.7}
.auth-notice p{margin:0 0 6px}
.auth-notice p:last-child{margin:0}
.auth-notice a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.auth-notice.is-error{border-color:#E8B4B4;background:#FDF5F5;color:#8A3232}
.auth-notice.is-ok{border-color:#B6DFC6;background:#F4FBF6;color:#1D6B3C}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.auth-check{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);font-weight:500;cursor:pointer}
.auth-check--block{display:flex;align-items:flex-start;margin-bottom:18px;line-height:1.7}
.auth-check input{width:16px;height:16px;accent-color:var(--gold);flex-shrink:0;margin-top:2px}
.auth-link{font-size:13px;color:var(--gold2)}
.auth-link:hover{color:var(--gold)}
.auth-alt{margin-top:22px;font-size:14px;color:var(--ink2);font-weight:500}
.auth-alt a{color:var(--gold2);font-weight:700}
.auth-alt a:hover{color:var(--gold)}
.pw-field{position:relative}
.pw-field input{padding-inline-end:44px}
.pw-toggle{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;padding:8px;color:var(--ink3);font-size:14px;line-height:1}
.pw-toggle:hover{color:var(--gold)}
.pw-meter{height:3px;background:var(--line);border-radius:999px;margin-top:8px;overflow:hidden}
.pw-meter span{display:block;height:100%;width:0;background:var(--gold);transition:width .3s,background .3s}
.pw-meter[data-level="1"] span{width:33%;background:#D64545}
.pw-meter[data-level="2"] span{width:66%;background:#E0A93B}
.pw-meter[data-level="3"] span{width:100%;background:#1DA65A}
/* Pot de miel : hors écran, mais lisible par un robot qui ignore le CSS. */
.dramine-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- RECHERCHE ---------- */
.dramine-search{display:flex;gap:9px}
.dramine-search input{flex:1;font-family:inherit;font-size:14.5px;padding:12px 14px;border:1px solid var(--line);
  background:#fff;color:var(--ink);border-radius:2px;transition:border-color .3s}
.dramine-search input:focus{outline:0;border-color:var(--gold)}
.dramine-search .btn{padding:12px 24px}

/* ---------- PAGINATION ---------- */
.dramine-pagination{padding-top:0}
.dramine-pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dramine-pagination .page-numbers{min-width:38px;height:38px;display:grid;place-items:center;padding:0 12px;
  border:1px solid var(--line);border-radius:2px;font-size:14px;color:var(--ink2);transition:all .3s}
.dramine-pagination .page-numbers:hover{border-color:var(--gold);color:var(--gold2)}
.dramine-pagination .page-numbers.current{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:700}
.dramine-pagination .dots{border:0}
.dramine-pagelinks{margin-top:26px;font-size:14px;color:var(--ink3)}
.dramine-pagelinks a{color:var(--gold2)}

/* ---------- WOOCOMMERCE : TUNNEL DE COMMANDE ---------- */
/* #order_review est remplacé en AJAX ; display:contents laisse ses panneaux
   circuler normalement dans la colonne. */
#order_review{display:contents}
/* ---------- Tunnel de commande ----------
   Le reste du site est passe a une typographie large (24px de texte,
   45px de titres) : le tunnel doit suivre, sinon le visiteur passe d'une
   page confortable a un formulaire minuscule au moment precis ou on lui
   demande de payer. Le cadre s'elargit et respire en consequence. */
/* Le tunnel est rendu dans le gabarit de page classique, dont la colonne
   de lecture est plafonnee a 900px. Confortable pour un article, trop
   etroit pour un formulaire a deux colonnes : on rend la largeur au seul
   tunnel, le reste du site garde sa mesure de lecture. */
body.dramine-checkout .wrap{max-width:none;padding-inline:0}
/* L'en-tete de page repousse le formulaire de 234px sans rien apprendre :
   le fil d'etapes dit deja ou l'on se trouve, et le titre du panneau dit
   ce qu'on demande. On le retire du tunnel seulement. */
body.dramine-checkout main>.wrap>.block:first-child>h1,
body.dramine-checkout main>.wrap>.block:first-child>.rule{display:none}
body.dramine-checkout main>.wrap>.block:first-child{padding-block:0}
body.dramine-checkout .block.dramine-prose{padding-block:0}
.co{max-width:1240px;padding:120px 32px 90px}
.co-grid{grid-template-columns:1fr 400px;gap:44px}
.co-panel{padding:48px 46px}
.co-panel h3{font-size:34px;line-height:1.3;margin-bottom:10px}
.co-panel .sub{font-size:19px;line-height:1.7;margin-bottom:34px}

/* Le fil d'etapes indique ou l'on en est : trop petit, il ne rassure pas. */
.steps{margin-bottom:56px}
.step{font-size:17px;gap:12px}
.step .num{width:36px;height:36px;font-size:15px}
.step-sep{width:60px;margin:0 18px}

.co-main{display:flex;flex-direction:column;gap:24px;min-width:0}
.steps{list-style:none;padding:0}
.steps .step-sep{list-style:none}
.co-panel[hidden]{display:none}
.co-panel .fg-half{display:inline-block;width:calc(50% - 8px)}
.co-panel .fg-half:nth-of-type(odd){margin-inline-end:14px}
.co-panel .woocommerce-billing-fields__field-wrapper,
.co-panel .woocommerce-additional-fields__field-wrapper{display:block}
/* Titres injectés par WooCommerce : le panneau porte déjà le sien, et ils
   restent en anglais tant que la traduction n'est pas installée. */
.co-panel .woocommerce-billing-fields>h3,
.co-panel .woocommerce-shipping-fields>h3,
.co-panel .woocommerce-additional-fields>h3{display:none}
.co-panel abbr.required{color:var(--gold);text-decoration:none;border:0}
.co-panel .fg label,.dramine-label{display:block;font-size:14px;letter-spacing:.08em;font-weight:700;
  color:var(--ink3);margin-bottom:7px}
.co-panel .fg input,.co-panel .fg select,.co-panel .fg textarea,
.co-panel .select2-container .select2-selection{width:100%;font-family:inherit;font-size:19px;padding:16px 18px;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:2px;transition:border-color .3s;height:auto}
.co-panel .fg input:focus,.co-panel .fg select:focus,.co-panel .fg textarea:focus{outline:0;border-color:var(--gold)}
.co-panel .fg textarea{min-height:120px;resize:vertical}
.co-panel .fg{margin-bottom:24px}

/* Choix du paiement et boutons : meme logique d'echelle. */
.co-panel .pay-opt{padding:22px 24px;margin-bottom:16px;gap:18px}
.co-panel .pay-opt h5{font-size:19px;margin-bottom:5px}
.co-panel .pay-opt p{font-size:16px;line-height:1.6}
.co-panel .pay-opt .dot{width:22px;height:22px}
.co-panel .pay-opt.sel .dot::after{width:11px;height:11px}
.co-panel .pay-detail{padding:22px 24px;font-size:17px;line-height:1.75}
/* Le recapitulatif de l'etape 3 est le dernier texte lu avant de payer :
   il etait reste a 12,5px pendant que le reste du tunnel passait a 19. */
.co-panel [data-checkout-recap] .mod{padding:18px 24px}
.co-panel [data-checkout-recap] .mt{font-size:18px}
.co-panel [data-checkout-recap] .md{font-size:17px}

.co-nav{margin-top:34px;gap:16px}
.co-nav .btn{font-size:18px;padding:18px 40px}

/* Le recapitulatif porte le prix : c'est lui qu'on relit avant de payer. */
.summary{padding:34px 32px;top:100px}
.summary h4{font-size:14px;margin-bottom:22px}
.sum-item{gap:16px;padding-bottom:22px;margin-bottom:22px}
.sum-item .si-t{font-size:18px;margin-bottom:6px}
.sum-item .si-d{font-size:15px;line-height:1.6}
.sum-line{font-size:17px;margin-bottom:13px}
.sum-line.tot{font-size:20px;padding-top:18px;margin-top:18px}
.sum-line.tot span:last-child{font-size:32px}
.co-panel .fg.woocommerce-invalid input,.co-panel .fg.woocommerce-invalid select{border-color:#D64545}
.co-panel .fg .woocommerce-input-wrapper{display:block}
.co-panel .select2-container--default .select2-selection--single{border:1px solid var(--line);border-radius:2px}
.co-panel .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.6;padding:0;color:var(--ink)}
.co-panel .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;inset-inline-end:8px}

/* Options de paiement : la brique .pay-opt de la maquette, pilotée par le radio. */
.wc_payment_methods{list-style:none;margin:0;padding:0}
.wc_payment_methods>li{list-style:none}
.wc_payment_methods input[type="radio"]{position:absolute;opacity:0;width:0;height:0}
.pay-opt{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);padding:16px 18px;
  cursor:pointer;margin-bottom:12px;transition:all .3s;text-align:start}
.pay-opt:hover{border-color:var(--gold)}
.wc_payment_methods input:checked+.pay-opt{border-color:var(--gold);background:var(--goldsoft)}
.wc_payment_methods input:focus-visible+.pay-opt{outline:2px solid var(--gold);outline-offset:2px}
.pay-opt .dot{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);flex-shrink:0;margin-top:3px;
  display:grid;place-items:center;background:#fff}
.wc_payment_methods input:checked+.pay-opt .dot{border-color:var(--gold)}
.wc_payment_methods input:checked+.pay-opt .dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--gold)}
.pay-opt__text{display:block}
.pay-opt__title{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px}
.pay-opt__note{display:block;font-size:12.5px;color:var(--ink3);font-weight:500}
.pay-opt.is-soon{opacity:.55;cursor:not-allowed}
.pay-detail p:last-child{margin-bottom:0}
.pay-detail{display:block}
.place-order{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.place-order .btn{flex:1 1 auto}
.woocommerce-terms-and-conditions-wrapper{flex-basis:100%;font-size:13px;color:var(--ink2);font-weight:500}
.woocommerce-terms-and-conditions-wrapper a{color:var(--gold2)}
.validate-required.woocommerce-invalid label{color:#D64545}
.woocommerce-error,.woocommerce-message,.woocommerce-info,.woocommerce-notices-wrapper .woocommerce-error{
  list-style:none;border:1px solid var(--line);border-radius:2px;padding:14px 18px;margin:0 0 20px;
  font-size:13.5px;font-weight:500}
.woocommerce-error{border-color:#E8B4B4;background:#FDF5F5;color:#8A3232}
.woocommerce-message{border-color:#B6DFC6;background:#F4FBF6;color:#1D6B3C}
.woocommerce-info{border-color:var(--line);background:var(--soft);color:var(--ink2)}
.woocommerce-error li,.woocommerce-message li{list-style:none}
.blockUI.blockOverlay{background:rgba(255,255,255,.7)!important}

/* Récapitulatif latéral. */
.dramine-summary .sum-item img{width:84px;height:84px;object-fit:cover;flex-shrink:0;border-radius:2px}
.dramine-summary .sum-line.tot .woocommerce-Price-amount{color:var(--gold);font-size:32px;font-weight:800}

/* Confirmation de commande. */
.woocommerce-order{max-width:1000px;margin:0 auto}
.woocommerce-order-details,.woocommerce-customer-details{margin-top:36px;border:1px solid var(--line);padding:26px 28px}
.woocommerce-order-details__title,.woocommerce-column__title{font-size:13px;letter-spacing:.14em;color:var(--ink3);
  font-weight:700;margin-bottom:18px;text-transform:uppercase}
.woocommerce-table--order-details{width:100%;border-collapse:collapse;font-size:14px}
.woocommerce-table--order-details th,.woocommerce-table--order-details td{border-bottom:1px solid var(--line);
  padding:12px 6px;text-align:start;font-weight:500;color:var(--ink2)}
.woocommerce-table--order-details tfoot th{font-weight:700;color:var(--ink)}
.woocommerce-order-overview{display:flex;flex-wrap:wrap;gap:18px;list-style:none;padding:0;margin:0 0 26px;
  font-size:13px;color:var(--ink3)}
.woocommerce-order-overview li strong{display:block;color:var(--ink);font-size:14.5px;font-weight:700;margin-top:4px}

/* ---------- ESPACE ÉTUDIANT (Tutor LMS) ---------- */
.tutor-wrap,.tutor-dashboard{--tutor-color-primary:var(--gold);--tutor-color-primary-hover:var(--gold2);
  --tutor-border-color:var(--line);--tutor-body-color:var(--ink2);--tutor-color-black:var(--ink);
  font-family:'Tajawal',sans-serif}
.dramine-dashboard,body.dramine-tutor main{padding-top:110px}
body.dramine-tutor main{min-height:60vh}
.dramine-dashboard .tutor-btn-primary{background:var(--gold);border-color:var(--gold)}
.dramine-dashboard .tutor-btn-primary:hover{background:var(--gold2);border-color:var(--gold2)}
.dramine-dashboard .tutor-card{border-color:var(--line);border-radius:3px}
.dramine-empty{text-align:center;border:1px solid var(--line);padding:52px 34px;max-width:560px;margin:0 auto}
.dramine-empty h3{font-size:20px;font-weight:800;margin-bottom:10px}
.dramine-empty p{font-size:15px;color:var(--ink2);font-weight:500;margin-bottom:22px}

/* ---------- COMMENTAIRES ---------- */
.dramine-comments{max-width:700px;margin:0 auto}
.dramine-comments .comment-list{list-style:none;padding:0;margin:0 0 34px}
.dramine-comments .comment-list li{border-bottom:1px solid var(--line);padding:20px 0}
.dramine-comments .comment-list li:last-child{border-bottom:0}
.dramine-comments .comment-author{font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px}
.dramine-comments .comment-author img{border-radius:50%}
.dramine-comments .comment-metadata{font-size:12px;color:var(--ink3);margin:4px 0 10px}
.dramine-comments .comment-content p{font-size:14.5px;color:var(--ink2);font-weight:500}
.dramine-comments .comment-respond{border:1px solid var(--line);padding:26px 28px}
.dramine-comments .comment-reply-title{font-size:17px;font-weight:800;margin-bottom:16px}
.dramine-comments .comment-form p{margin-bottom:16px}
.dramine-comments .comment-form label{display:block;font-size:11px;letter-spacing:.1em;font-weight:700;
  color:var(--ink3);margin-bottom:7px}
.dramine-comments .comment-form input[type="text"],.dramine-comments .comment-form input[type="email"],
.dramine-comments .comment-form input[type="url"],.dramine-comments .comment-form textarea{
  width:100%;font-family:inherit;font-size:14.5px;padding:12px 14px;border:1px solid var(--line);
  background:#fff;color:var(--ink);border-radius:2px}
.dramine-comments .comment-form textarea{min-height:120px;resize:vertical}
.dramine-comments .comment-form input:focus,.dramine-comments .comment-form textarea:focus{
  outline:0;border-color:var(--gold)}
.dramine-comments .form-submit input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 36px;border-radius:999px;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  border:1px solid transparent;background:var(--gold);color:#fff;transition:all .3s}
.dramine-comments .form-submit input[type="submit"]:hover{background:var(--gold2)}

/* ---------- VIDÉO EN FAÇADE ---------- */
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.is-playing{cursor:default}
.video.is-playing .play,.video.is-playing .bg{display:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .auth-wrap{padding-top:92px}
  .co-panel .fg-half{width:100%}
  .co-panel .fg-half:nth-of-type(odd){margin-inline-end:0}
  /* wp.css est charge apres theme.css : notre regle a deux colonnes
     ecrasait celle du media mobile d'origine. On la redit ici. */
  .co-grid{grid-template-columns:1fr;gap:24px}
  .co{padding:40px 18px 60px}
  .steps{margin-bottom:30px}
  .co-panel{padding:30px 22px}
  .co-panel h3{font-size:28px}
  .co-panel .sub{font-size:18px;margin-bottom:26px}
  /* Le recapitulatif passait en tete sur mobile (order:-1 d'origine).
     A la nouvelle echelle il faisait 607px : le premier champ tombait a
     935px, soit un ecran entier de defilement avant de pouvoir taper quoi
     que ce soit. Le visiteur arrive d'un bouton ou le prix etait affiche,
     et le total lui est reconfirme a l'etape 3 : on met donc la saisie
     d'abord, le recapitulatif juste dessous, allege de ses garanties
     deja lues sur la page de vente. */
  .co-grid .co-main{order:1}
  .co-grid .summary{order:2}
  .summary{padding:22px 20px}
  .summary .trust-row{display:none}
  .summary h4{margin-bottom:14px}
  .sum-item{gap:12px;padding-bottom:16px;margin-bottom:16px}
  .dramine-summary .sum-item img{width:64px;height:64px}
  .sum-item .si-t{font-size:17px}
  .sum-line{font-size:16px;margin-bottom:9px}
  .sum-line.tot{padding-top:14px;margin-top:14px}
  .sum-line.tot span:last-child{font-size:28px}
  .co-nav .btn{width:100%;justify-content:center}
  .dramine-summary{position:static;order:-1}
  .place-order{flex-direction:column;align-items:stretch}
  .woocommerce-order-details,.woocommerce-customer-details{padding:22px 20px}
}

/* ---------- PARCOURS EN ÉTAPES ---------- */
/* Jalons reliés par un filet doré continu, dans l'esprit des .modules
   de la maquette : bordure fine, numéro doré, texte aligné au début. */
.journey{list-style:none;margin:34px 0 0;padding:0;text-align:start;position:relative}
.journey-step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:0 0 34px;align-items:start}
.journey-step:last-child{padding-bottom:0}
/* Le filet part du centre de la pastille et s'arrête à la dernière. */
.journey-step::before{content:'';position:absolute;top:44px;bottom:-6px;inset-inline-start:21px;
  width:1px;background:var(--line)}
.journey-step:last-child::before{display:none}
.journey-num{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:#fff;
  color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.04em;
  display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1}
.journey-body h3{font-size:17.5px;font-weight:800;margin:11px 0 8px;line-height:1.5}
.journey-body p{font-size:15px;color:var(--ink2);font-weight:500;margin:0}
.journey-visual{grid-column:2;margin-top:14px;border-radius:3px;overflow:hidden;background:var(--soft)}
.journey-visual img{width:100%;height:auto;display:block}

/* ---------- GRILLE D'EXPERTISES ---------- */
.skills{display:grid;gap:20px;margin-top:34px;text-align:start}
.skills--3{grid-template-columns:repeat(3,1fr)}
.skills--2{grid-template-columns:repeat(2,1fr)}
.skill{border:1px solid var(--line);padding:26px 24px;transition:all .35s;background:#fff}
.skill:hover{border-color:var(--gold);transform:translateY(-3px)}
.skill h3{font-size:15px;font-weight:800;color:var(--gold);margin-bottom:9px;line-height:1.5}
.skill p{font-size:14px;color:var(--ink2);font-weight:500;margin:0;line-height:1.85}

@media(max-width:860px){
  .skills--3,.skills--2{grid-template-columns:1fr}
  .journey-step{grid-template-columns:auto 1fr;gap:15px}
  .journey-step::before{inset-inline-start:18px}
  .journey-num{width:38px;height:38px;font-size:12px}
  .journey-body h3{margin-top:8px}
}

/* ---------- DUO : IMAGE + TEXTE ALTERNÉ ---------- */
/* Reprend l'esprit .course/.about-visual de la maquette : un visuel net,
   un texte aligné au début, sans jamais recourir à des coins très arrondis
   ni à des aplats de couleur étrangers à la charte. */
/* Ces blocs vivaient dans la colonne de lecture de 900px. A deux colonnes,
   le texte n'avait plus que 428px de large : il s'etirait en hauteur bien
   au-dela de l'image et laissait jusqu'a 500px de blanc a cote d'elle.
   On elargit la section — sans toucher au texte — et l'image prend
   exactement la hauteur de la colonne voisine. */
.duo-grid{--duo:min(1180px, calc(100vw - 48px));
  width:var(--duo);margin-inline:calc((100% - var(--duo)) / 2);
  display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:stretch;text-align:start}
.duo--img-gauche .duo-grid{grid-template-columns:1.15fr 1fr}
/* Le site est en RTL : la premiere colonne est celle de droite. Un
   order:-1 sur l'image la remettait donc a droite, la ou elle etait
   deja — les trois blocs se retrouvaient identiques, sans alternance.
   C'est en la poussant en seconde position qu'elle passe a gauche. */
.duo--img-gauche .duo-visual{order:1}
.duo-visual{border-radius:30px;overflow:hidden;background:var(--soft)}
/* L'image suit la hauteur du texte plutot qu'un format fixe : c'est ce
   qui supprime le blanc, sans rien retirer au contenu. */
.duo-visual img{width:100%;height:100%;min-height:420px;display:block;object-fit:cover}
/* Bloc sans visuel : une seule colonne, calee sur la mesure de lecture
   du reste de la page plutot qu'etiree sur 1180px. */
.duo--sans-image .duo-grid{grid-template-columns:1fr;--duo:min(900px, calc(100vw - 48px))}
.duo-content .kicker{text-align:start}
.duo-content h2{font-size:45px;font-weight:800;line-height:1.5;margin-bottom:16px}
.duo-content p{font-size:24px;color:var(--ink2);font-weight:500;margin-bottom:14px}
.duo-list{list-style:none;margin:8px 0 0;padding:0}
.duo-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:20px;color:var(--ink2);font-weight:500}
.duo-list li:last-child{border-bottom:0}
.duo-list li span:first-child{color:var(--gold);font-weight:800;flex-shrink:0;margin-top:1px}
.duo .cta-row{justify-content:flex-start}

/* ---------- PARCOURS SOMBRE (bandeau plein écran) ---------- */
/* S'appuie sur .band déjà utilisée par la maquette (fond #12100E, la même
   teinte sombre que le hero) : aucune nouvelle couleur n'est introduite. */
.band--journey{padding-block:120px}
/* Un halo doré très diffus derrière les jalons : le noir plat rendait la
   section inerte au milieu d'une page claire. */
.band--journey::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 8%, rgba(201,162,39,.16) 0%, rgba(201,162,39,.05) 42%, transparent 72%)}
.band--journey>.in{max-width:1240px;position:relative;z-index:2}
.band--journey .kicker{color:var(--gold);font-size:15px}
.band--journey h2{margin-bottom:14px}
.band--journey>.in>p{margin-bottom:0;font-size:21px;line-height:1.8}

.journey-dark{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:72px;position:relative}
/* Le trait relie les jalons ; il se trace au moment où la section entre
   dans l'écran, depuis le jalon 01 — à droite, puisqu'on lit en RTL. */
.journey-dark::before{content:'';position:absolute;top:34px;inset-inline:12%;height:2px;
  background:linear-gradient(to left, rgba(201,162,39,.7), rgba(201,162,39,.25));
  transform:scaleX(0);transform-origin:right center}
.journey-dark.in::before{transform:scaleX(1);transition:transform 1.2s cubic-bezier(.22,1,.36,1) .15s}

.journey-dark-step{position:relative;padding:0 22px;text-align:center}
.journey-dark-num{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 26px;
  border-radius:50%;background:#12100E;border:2px solid var(--gold);color:var(--gold);
  font-size:18px;font-weight:800;position:relative;z-index:1;
  transition:background .45s, color .45s, box-shadow .45s, transform .45s}
.journey-dark-step:hover .journey-dark-num{background:var(--gold);color:#12100E;
  transform:translateY(-4px);box-shadow:0 0 0 10px rgba(201,162,39,.12)}
.journey-dark-step h3{color:#fff;font-size:24px;font-weight:800;margin-bottom:14px;line-height:1.45}
.journey-dark-step p{color:rgba(255,255,255,.72);font-size:18px;font-weight:500;margin:0;line-height:1.85}

/* Les jalons se posent l'un apres l'autre, dans le sens de lecture.
   L'animation n'existe que sous .in : sans JavaScript la classe n'est
   jamais ajoutee et les jalons restent simplement visibles. */
@keyframes dramine-jalon{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
.journey-dark.in .journey-dark-step{animation:dramine-jalon .75s cubic-bezier(.22,1,.36,1) both}
.journey-dark.in .journey-dark-step:nth-child(1){animation-delay:.20s}
.journey-dark.in .journey-dark-step:nth-child(2){animation-delay:.38s}
.journey-dark.in .journey-dark-step:nth-child(3){animation-delay:.56s}
.journey-dark.in .journey-dark-step:nth-child(4){animation-delay:.74s}

@media(prefers-reduced-motion:reduce){
  .journey-dark.in::before{transition:none}
  .journey-dark.in .journey-dark-step{animation:none}
}

/* ---------- TÉMOIGNAGES : VARIANTE SOMBRE ---------- */
.quotes--sombre{background:#12100E;border-block-color:#12100E}
.quotes--sombre h2{color:#fff}
.quotes--sombre .q{background:#1B1815;border-color:rgba(255,255,255,.08)}
.quotes--sombre .q p{color:rgba(255,255,255,.72)}
.quotes--sombre .q .who{color:#fff}

@media(max-width:860px){
  .duo-grid{--duo:100%;width:100%;margin-inline:0;grid-template-columns:1fr;gap:26px}
  /* Empilees, les colonnes ne se font plus face : l'image reprend un
     format fixe, sinon elle s'etirerait sur toute la hauteur du texte. */
  .duo-visual img{height:auto;min-height:0;aspect-ratio:4/5}
  .duo--img-gauche .duo-grid{grid-template-columns:1fr}
  .duo--img-gauche .duo-visual{order:0}
  /* .duo-visual img{aspect-ratio:16/10} */
  .journey-dark{grid-template-columns:1fr;gap:40px;margin-top:48px}
  .journey-dark::before{display:none}
  .journey-dark-num{width:60px;height:60px;font-size:17px;margin-bottom:18px}
  .journey-dark-step h3{font-size:23px}
  .journey-dark-step p{font-size:18px}
  .band--journey{padding-block:80px}
  .band--journey>.in>p{font-size:19px}
}

/* ---------- TYPOGRAPHIE AGRANDIE (demande client, cf. réf. safiatahar.com) ---------- */
/* Ce client aime les textes grands, à l'image du site cité en référence :
   vérifié sur safiatahar.com, ses paragraphes sont à 24px et ses sous-titres
   à 32px, identiques au pixel près sur mobile et sur desktop (aucun clamp()
   ni aucune media query ne les réduit en dessous de 768px).
   On applique donc la même logique ici, en conservant theme.css intact :
   - le corps de texte (paragraphes, listes, réponses de FAQ, citations)
     passe de ~16px à 24px ;
   - les titres de section passent à une taille fixe de 45px ;
   - aucune des deux catégories ne se réduit plus sur mobile.
   Restent volontairement inchangés : les légendes courtes dans les grilles
   denses (.mini, .skill, .cred, .other, .journey-dark-step), la navigation,
   les boutons, les prix et toute l'interface du tunnel de commande — des
   éléments d'interface, pas du texte de lecture. */

.hero-in p,
.block p,
.course p,
.lp-sec p,
.bullets div,
.for-who div,
.faq p,
.guarantee p{font-size:24px}

.wrap .block h1.rv{font-size:45px;line-height:1.3}
.block h2,
.band h2,
.lp-sec h2,
.course h3{font-size:45px;line-height:1.3}

/* Le hero garde son statut de plus gros titre du site : on fixe sa taille
   maximale actuelle au lieu de la laisser rétrécir sur les petits écrans.
   Ni cette règle ni les précédentes n'utilisent clamp() ou vw : rien ne
   les réduit plus en dessous de 860px, donc aucune media query n'est
   nécessaire pour le mobile. */
.hero-in h1{font-size:58px}

/* ====================================================================== */
/* PAGE DE VENTE D'UNE FORMATION — optimisée pour le trafic publicitaire  */
/* ====================================================================== */
/* Cette page reçoit des visiteurs qui arrivent d'une publicité, sans rien
   connaître du site, en majorité depuis un téléphone. Les choix ci-dessous
   servent tous la même chose : comprendre l'offre et son prix sans
   défiler, garder une seule action évidente, et rendre les longues listes
   confortables à lire. */

/* ---------- Bloc d'ouverture : offre et prix sans défilement ---------- */
.lp-lead{max-width:1180px;margin:0 auto;padding:24px 24px 0}
/* Le titre court sur toute la largeur, au-dessus du duo : sur deux
   colonnes il se cassait en trois lignes étroites alors qu'il porte la
   promesse entière de la page. */
/* Titre et promesse traversent les deux colonnes : ils annoncent, ils ne
   se partagent pas la ligne avec le visuel. Centres, ils tiennent lieu
   d'ouverture avant que le regard ne descende vers l'image et le prix. */
.lp-lead__head{grid-column:1/-1;text-align:center;margin-bottom:0}
.lp-lead__head .kicker{text-align:center}
.lp-lead__promise{grid-column:1/-1;text-align:center;max-width:900px;margin-inline:auto}
.lp-lead__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;align-items:center}
.lp-lead__media{border-radius:40px;overflow:hidden;background:var(--soft)}
/* Les portraits livres sont verticaux. Dans un cadre 4/3 paysage, le
   recadrage coupait la tete et les jambes : le carre garde le sujet
   entier du visage a la taille, et le decalage vers le haut evite de
   centrer sur le torse. */
.lp-lead__media img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;object-position:center 18%}
.lp-lead__body{text-align:start}
.lp-lead__body .kicker{text-align:start}
.lp-lead__title{font-size:45px;font-weight:800;line-height:1.3;margin-bottom:0}
.lp-lead__promise{font-size:24px;color:var(--ink2);font-weight:500;margin-bottom:0}
.lp-lead .chips{justify-content:flex-start;margin-bottom:26px}

/* Le prix est l'information que le visiteur cherche en premier :
   il est traité comme un élément d'affichage, pas comme une note. */
.lp-lead__price{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.lp-lead__price .p{font-size:52px;font-weight:800;color:var(--gold);line-height:1}
.lp-lead__price .o{font-size:22px;color:var(--ink3);text-decoration:line-through}

/* Une seule action dominante. Le second bouton reste accessible mais
   cesse de rivaliser visuellement avec l'achat. */
.lp-lead__cta{justify-content:flex-start;margin-top:0;gap:14px}
.lp-lead__cta .btn-gold{font-size:18px;padding:18px 44px}
.btn-quiet{background:transparent;color:var(--ink2);border-color:transparent;text-decoration:underline;
  text-underline-offset:5px;padding-inline:14px}
.btn-quiet:hover{color:var(--gold2)}

/* ---------- Rythme de lecture ---------- */
.lp .wrap{padding-inline:24px}

/* ---------- Listes : une colonne, plus grandes, plus aérées ---------- */
/* En deux colonnes, ces listes se lisaient en zigzag et chaque ligne
   devenait un pavé étroit. Sur une page dont le rôle est de convaincre,
   une colonne unique se parcourt d'un seul regard. */
.lp .for-who{grid-template-columns:1fr;gap:0;max-width:760px;margin-inline:auto}
.lp .for-who li{font-size:26px;line-height:1.7;padding:22px 26px;border:0; font-weight: 500;
  border-bottom:1px solid var(--line);gap:16px;align-items:center}
.lp .for-who li:last-child{border-bottom:0}
.lp .for-who li b{font-size:22px}
.lp .bullets{max-width:760px;margin-inline:auto}
.lp .bullets li{font-size:26px;line-height:1.7;padding:22px 26px;gap:18px;align-items:center}

/* ---------- Capsules : la promesse de contenu ---------- */
.lp .journey{max-width:820px;margin-inline:auto}
.lp .journey-body h3{font-size:26px;margin-top:9px}
.lp .journey-body p{font-size:22px}

/* ---------- Le moment du prix ---------- */
.lp .price-box{max-width:520px;padding:44px 40px;border-width:2px;border-color:var(--gold)}
.lp .price-box .lbl{font-size:15px}
.lp .price-box .p{font-size:64px}
.lp .price-box .btn{font-size:18px;padding:18px 30px;margin-bottom:12px}
.lp .price-box .feat li{font-size:17px;padding:14px 0}

/* ---------- Questions fréquentes ---------- */
.lp .faq{max-width:820px;margin-inline:auto}
.lp .faq summary{font-size:22px;padding:24px 26px}
.lp .faq p{font-size:21px;padding:0 26px 22px}

/* ---------- Barre d'achat collante ---------- */
.sticky-buy{padding:14px 24px;border-top-color:var(--line);box-shadow:0 -4px 24px rgba(0,0,0,.06)}
.sticky-buy .t{font-size:17px;font-weight:800}
.sticky-buy .t span{font-size:15px;color:var(--gold2);font-weight:700}
.sticky-buy .btn{font-size:17px;padding:15px 38px}

@media(max-width:860px){
  /* Tout l'enjeu du mobile : que le prix et le bouton tiennent dans le
     premier écran, sans que le visiteur ait à défiler. Le visuel est donc
     plafonné, les marges resserrées, et surtout les puces d'information
     passent APRÈS le bouton — elles renseignent, elles ne convertissent
     pas. L'ordre visuel devient : titre, image, promesse, prix, bouton. */
  /* Le décompte agrandi coûte de la hauteur : on la reprend sur le visuel
     et les marges, pour que le bouton reste dans le premier écran. */
  .lp-lead{padding:10px 20px 0}
  /* Une colonne ordonnee a la main : titre, image, promesse, puis le reste.
     La promesse passe donc SOUS l'image, alors qu'elle est au-dessus sur
     grand ecran. */
  .lp-lead__grid{display:flex;flex-direction:column;gap:12px}
  .lp-lead__head{order:1}
  .lp-lead__media{order:2}
  .lp-lead__grid>.lp-lead__promise{order:3;text-align:center;max-width:none}
  .lp-lead__body{order:4}
  /* Le carre coutait 335px de hauteur et repoussait le bouton juste sous
     la ligne de flottaison. Un format legerement paysage rend ces pixels
     sans couper le sujet, qui reste cadre du visage a la taille. */
  .lp-lead__media img{aspect-ratio:5/4}
  .lp-lead__body{display:flex;flex-direction:column}
  .lp-lead__head .kicker{margin-bottom:8px}
  .lp-lead__title{font-size:36px;line-height:1.2;margin-bottom:0}
  .lp-lead__promise{font-size:20px;margin-bottom:0}
  .lp-lead__price{order:4;margin-bottom:12px}
  /* Le décompte se place juste au-dessus du bouton : il justifie le clic
     au moment où on le demande, pas trois écrans plus haut. Sans ordre
     explicite il repassait en tête de colonne, avant même le titre. */
  .lp-lead .countdown{order:5;margin-bottom:16px}
  .lp-lead__cta{order:6}
  .lp-lead .chips{order:7;margin-top:20px;margin-bottom:0}
  .lp-lead__price .p{font-size:44px}
  .lp-lead__cta{flex-direction:column;align-items:stretch}
  .lp-lead__cta .btn-gold{width:100%;font-size:18px;padding:19px 24px}
  .lp-lead__cta .btn-quiet{width:100%}

  .lp .for-who li,.lp .bullets li{font-size:22px;padding:18px 20px}
  .lp .journey-body h3{font-size:22px}
  .lp .journey-body p{font-size:20px}
  .lp .price-box{padding:34px 24px}
  .lp .price-box .p{font-size:52px}
  .lp .faq summary{font-size:20px;padding:20px}
  .lp .faq p{font-size:19px;padding:0 20px 18px}

  /* Sur mobile la barre d'achat porte le prix et l'action : elle reste
     la seule chose fixe à l'écran pendant toute la lecture. */
  .sticky-buy{padding:10px 14px;gap:10px}
  .sticky-buy .t{font-size:15px}
  .sticky-buy .t span{font-size:14px}
  .sticky-buy .btn{font-size:16px;padding:14px 22px;white-space:nowrap}
  /* La page se termine au-dessus de la barre, sinon elle masque le pied. */
  body.dramine-course{padding-bottom:76px}
}

/* ---------- COMPTE À REBOURS DE L'OFFRE ---------- */
/* Il est traité comme le bouton : même famille visuelle, même poids à
   l'écran. Posé juste au-dessus de l'action, il en devient l'argument. */
.countdown{margin:0 0 26px;text-align:start}
.countdown__label{font-size:19px;font-weight:800;letter-spacing:.06em;color:var(--gold2);margin-bottom:14px}
.countdown__units{display:flex;gap:12px;justify-content:flex-start}
.countdown__unit{min-width:104px;padding:18px 12px;border:2px solid var(--gold);border-radius:3px;
  background:var(--goldsoft);text-align:center}
.countdown__num{display:block;font-size:46px;font-weight:800;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.countdown__name{display:block;font-size:15px;font-weight:700;color:var(--ink3);margin-top:8px}
/* Dans l'encadré tarifaire, le décompte reste centré comme le reste. */
.price-box .countdown{text-align:center;margin-bottom:22px}
.price-box .countdown__units{justify-content:center;gap:8px}
.price-box .countdown__unit{min-width:0;flex:1;padding:12px 6px}
.price-box .countdown__num{font-size:30px}
.price-box .countdown__name{font-size:12.5px;margin-top:5px}

/* ---------- BOUTONS D'ACHAT ---------- */
/* Une page publicitaire n'a qu'une action : elle doit être la chose la plus
   visible de l'écran, à chaque section, et rester reconnaissable partout. */
.btn-cta,
.lp .btn-gold{font-size:20px;font-weight:800;padding:22px 52px;letter-spacing:.01em}
.lp .cta-row{margin-top:34px}

/* Respiration lente sur le bouton principal : elle attire l'œil sans
   clignoter ni sautiller. Neutralisée plus bas si le visiteur a demandé
   moins d'animations. */
@keyframes dramine-cta-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.42)}
  70%{box-shadow:0 0 0 16px rgba(201,162,39,0)}
}
/* Tous les boutons dorés de la page de vente, pas seulement celui du
   bloc d'ouverture : ce sont tous la même action, ils doivent tous
   attirer l'œil de la même façon. */
.btn-cta,
.lp .btn-gold{animation:dramine-cta-pulse 2.6s cubic-bezier(.66,0,0,1) infinite}
.btn-cta:hover,
.lp .btn-gold:hover{animation-play-state:paused}
.lp .btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(201,162,39,.32)}
.lp .btn-gold:active{transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .btn-cta,
  .lp .btn-gold{animation:none}
  .lp .btn-gold:hover{transform:none}
}

@media(max-width:860px){
  .countdown{margin-bottom:14px}
  .countdown__label{font-size:17px;margin-bottom:8px}
  .countdown__units{gap:7px}
  .countdown__unit{min-width:0;flex:1;padding:9px 3px}
  .countdown__num{font-size:29px}
  .countdown__name{font-size:12.5px;margin-top:3px}
  .price-box .countdown__num{font-size:26px}

  .btn-cta,
  .lp .btn-gold{font-size:19px;padding:19px 26px;width:100%}
  .lp .cta-row{margin-top:26px}
  /* La barre collante garde un bouton compact : elle partage sa ligne
     avec le titre et le prix. */
  .sticky-buy .btn-cta{width:auto;font-size:16px;padding:14px 24px}
}

/* ---------- Vignettes de formations ----------
   Trois visuels cote a cote, le titre pose dessus : la section montre les
   directions possibles sans rejouer le detail de chaque formation, puis un
   bouton envoie au catalogue. Le voile sombre n'est pas decoratif, il
   garantit que le titre reste lisible quelle que soit la photo. */
/* La section vit dans la colonne de lecture (900px) : a trois de front,
   chaque vignette tombait a 267px et le titre n'y tenait plus. On sort du
   plafond par des marges negatives symetriques, sans toucher au gabarit
   des autres blocs. */
.course-tiles-bloc{--tuiles:min(1280px, calc(100vw - 48px));
  width:var(--tuiles);margin-inline:calc((100% - var(--tuiles)) / 2)}
.course-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.course-tile{position:relative;display:block;overflow:hidden;border-radius:14px;
  aspect-ratio:3/4;background:var(--soft);text-decoration:none;isolation:isolate}
.course-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.course-tile:hover img,.course-tile:focus-visible img{transform:scale(1.06)}
.course-tile__voile{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,16,12,.88) 0%,rgba(20,16,12,.55) 34%,rgba(20,16,12,.08) 62%,rgba(20,16,12,0) 100%)}
.course-tile__corps{position:absolute;inset-inline:0;bottom:0;padding:30px 28px;
  display:flex;flex-direction:column;gap:10px;text-align:start}
.course-tile__tag{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--gold)}
.course-tile__titre{font-size:30px;font-weight:800;line-height:1.35;color:#fff}
.course-tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.course-tiles__cta{justify-content:center;margin-top:40px}

@media(max-width:860px){
  /* Une colonne : trois vignettes en 3/4 cote a cote deviendraient des
     timbres-poste. En pleine largeur, le format s'aplatit un peu pour que
     les trois restent parcourables sans defiler trois ecrans. */
  /* Empilees, trois vignettes prenaient trois ecrans de defilement pour
     un choix qui se fait d'un coup d'oeil. On les met sur un rail que le
     pouce fait glisser : defilement natif du navigateur avec accroche,
     aucune librairie, donc rien de plus a telecharger.
     La vignette suivante depasse volontairement du bord : c'est ce qui
     dit qu'il y a autre chose a voir, mieux qu'une fleche. */
  .course-tiles-bloc{--tuiles:100%;width:100%;margin-inline:0}
  .course-tiles{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    /* Le rail va d'un bord a l'autre de l'ecran, mais la premiere et la
       derniere vignette restent alignees sur la marge du texte. */
    margin-inline:-24px;
    padding-inline:24px;
    scroll-padding-inline:24px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .course-tiles::-webkit-scrollbar{display:none}
  .course-tile{flex:0 0 84%;scroll-snap-align:start;aspect-ratio:4/5}
  .course-tile__corps{padding:24px 22px;gap:8px}
  .course-tile__titre{font-size:26px}
  .course-tiles__cta{margin-top:26px}
  .course-tiles__cta .btn{width:100%;justify-content:center}

  /* Reperes de position : ou j'en suis, combien il en reste. Ils ne sont
     ecrits que si le rail est actif (voir theme.js). */
  .tiles-dots{display:flex;justify-content:center;gap:9px;margin-top:18px}
  .tiles-dots button{
    width:9px;height:9px;padding:0;border:0;border-radius:50%;
    background:var(--line);cursor:pointer;
    transition:background .3s,width .3s;
  }
  .tiles-dots button[aria-current="true"]{background:var(--gold);width:26px;border-radius:5px}
  .course-tiles:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:14px}
}

/* ---------- Hero en couverture plein ecran ----------
   Le hero ordinaire est un bandeau pose dans la page : cadre de 1180px,
   coins arrondis, marge sous le menu. En mode couverture il devient la
   page elle-meme le temps du premier ecran — l'image va bord a bord et
   le texte se cale au centre.
   La hauteur est donnee en svh : sur mobile, 100vh compte la barre
   d'adresse du navigateur, ce qui poussait le bas de l'image hors de
   l'ecran au chargement puis la faisait sauter au premier defilement. */
.hero--couverture{padding:0}
.hero--couverture .hero-visual{
  max-width:none;border-radius:0;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
}
/* L'image porte la page : elle s'assombrit moins que dans un bandeau. */
.hero--couverture .hero-visual .bg{opacity:.68;background-position:center 30%}
.hero--couverture .hero-visual::after{
  background:linear-gradient(180deg,rgba(18,16,14,.0) 0%,rgba(18,16,14,.28) 38%,rgba(18,16,14,.82) 100%)}
/* Le bloc de texte est centre dans la couverture. Les marges auto sont
   indispensables : sans elles, une largeur maximale en RTL colle le bloc
   contre le bord droit au lieu de le centrer. */
.hero--couverture .hero-in{
  width:100%;max-width:none;
  padding-inline:max(24px, calc((100% - 1180px) / 2));
  padding-block:120px 96px;
  text-align:center;
}
.hero--couverture .hero-in>*{max-width:760px;margin-inline:auto}
.hero--couverture .hero-in .kicker{text-align:center}
.hero--couverture .hero-in .cta-row{justify-content:center}
.hero--couverture .hero-in h1{font-size:clamp(38px,6.4vw,68px)}
.hero--couverture .hero-in p{font-size:22px;line-height:1.75}

@media(max-width:860px){
  /* L'ecran est etroit et haut, la photo large : le cadrage ne montre
     qu'un quart de l'image. Centre, il coupait le personnage en deux.
     On decale la prise de vue vers lui — il occupe le tiers gauche de
     la photo — pour qu'il tombe au milieu de l'ecran. */
  .hero--couverture .hero-visual .bg{background-position:30% center}
  .hero--couverture .hero-in{padding-block:110px 80px}
  .hero--couverture .hero-in h1{font-size:38px}
  .hero--couverture .hero-in p{font-size:19px}
}

/* ---------- Fonds de section ----------
   Une page de vente enchaine dix sections de texte sur fond blanc : rien
   ne dit ou une idee s'arrete et ou la suivante commence. Un panneau
   colore sur une ou deux sections cle redonne ce rythme.
   Panneau large et arrondi plutot que bandeau bord a bord : une largeur
   en 100vw compte la barre de defilement et fait deborder la page de
   quelques pixels sur les navigateurs de bureau. */
/* Le selecteur porte aussi .block : sans cela, la regle .lp .block du
   gabarit de vente, plus specifique, remettait le rembourrage a zero et
   le texte venait toucher le bord du panneau.

   Le bandeau va d'un bord a l'autre de l'ecran. La largeur ne peut pas
   etre un simple 100vw : cette unite compte la barre de defilement, et
   la page gagnait un debordement horizontal de sa largeur. Le script du
   theme mesure cette barre et l'expose en --sbw ; sans JavaScript la
   variable vaut 0 et l'on retombe sur le comportement d'origine. */
.block.section-fond{
  --plein:calc(100vw - var(--sbw, 0px));
  width:var(--plein);
  margin-inline:calc((100% - var(--plein)) / 2);
  padding-block:96px;
  padding-inline:max(24px, calc((var(--plein) - 900px) / 2));
  border-radius:0;
  border-top:0 !important;
  position:relative;
  overflow:hidden;
}

/* Respiration claire : la teinte doree du site, posee tres legerement. */
.section-fond--doux{
  background:linear-gradient(170deg, rgba(201,162,39,.10) 0%, rgba(201,162,39,.04) 100%);
  border:1px solid rgba(201,162,39,.18);
}

/* Rupture forte : reservee au moment ou l'argumentaire bascule. */
.section-fond--sombre{background:#12100E;color:rgba(255,255,255,.82)}
.section-fond--sombre::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 70% at 50% 0%, rgba(201,162,39,.18) 0%, transparent 68%)}
.section-fond--sombre>*{position:relative;z-index:1}
.section-fond--sombre h2,
.section-fond--sombre h3{color:#fff}
.section-fond--sombre p{color:rgba(255,255,255,.78)}
.section-fond--sombre .kicker{color:var(--gold)}
.section-fond--sombre .rule{background:rgba(201,162,39,.45)}
/* Les jalons du parcours reposent sur des bordures claires. */
.section-fond--sombre .journey-item,
.section-fond--sombre .journey-body{border-color:rgba(255,255,255,.14)}
.section-fond--sombre .journey-num{background:transparent;border-color:var(--gold);color:var(--gold)}
.section-fond--sombre .btn-line{border-color:rgba(255,255,255,.35);color:#fff}
.section-fond--sombre .btn-line:hover{border-color:var(--gold);color:var(--gold)}

@media(max-width:860px){
  /* Sur mobile la page n'a que 24px de marge : le panneau les reprend
     pour rester bord a bord sans deborder. */
  .block.section-fond{padding-block:60px;padding-inline:24px;border-radius:0}
}

/* ---------- Visuels des cartes de formation ----------
   .visual img n'impose aucun format : l'image prend son ratio naturel.
   C'etait sans consequence avec des photos en paysage, mais les nouveaux
   portraits verticaux donnaient des bandeaux de 1136px de haut — une
   carte de 1682px, et une page catalogue de plus de dix mille pixels.
   Le bandeau reprend donc un format paysage, cale sur le haut du sujet. */
.course .visual img{aspect-ratio:16/9;object-fit:cover;object-position:center 18%;height:auto}

@media(max-width:860px){
  /* Un peu moins large sur mobile : le sujet y respire mieux. */
  .course .visual img{aspect-ratio:4/3}
}

/* ---------- Bandeau d'ouverture : texte et sujet cote a cote ----------
   Les visuels livres sont des portraits : une fois decoupes en bandeau,
   le sujet occupe le milieu de l'image, exactement la ou le texte etait
   centre. On pousse donc le texte du cote de la lumiere — a droite, ce
   qui est aussi le debut de lecture en arabe — et le visage reste
   degage. La couverture plein ecran garde son texte centre. */
.hero:not(.hero--couverture) .hero-visual{justify-content:flex-start}
/* La marge ecarte le bloc du bord ; un padding aurait mange la largeur du
   texte lui-meme — calcule sur le parent, il laissait 315px utiles et le
   titre tombait mot par mot. */
.hero:not(.hero--couverture) .hero-in{
  max-width:620px;text-align:start;padding-inline:0;
  margin-inline-start:max(26px, calc((100% - 1180px) / 2));
  margin-inline-end:26px;
}

@media(max-width:860px){
  /* Trop etroit pour partager la largeur : le texte se recentre. */
  .hero:not(.hero--couverture) .hero-visual{justify-content:center}
  .hero:not(.hero--couverture) .hero-in{text-align:center;padding-inline:22px;margin-inline:0;max-width:none}
}

/* ---------- Ecrans de Tutor : tableau de bord et lecons ----------
   Tutor construit ses propres pages, avec sa palette. Le reglage de
   couleur de marque couvre les boutons et les liens ; ces quelques
   regles reprennent ce qu'il laisse en bleu, et redonnent au tableau de
   bord la respiration du reste du site. */
.tutor-dashboard-layout{max-width:1240px;margin:0 auto;padding:40px 24px 80px}
.tutor-dashboard-permalinks .is-active,
.tutor-dashboard-permalinks a:hover{color:var(--gold)}
.tutor-dashboard-content a:not(.tutor-btn){color:var(--gold2)}
.tutor-dashboard-content a:not(.tutor-btn):hover{color:var(--gold)}
/* La barre du site est fixe : on degage le contenu de Tutor. */
body.tutor-dashboard-page .tutor-dashboard-layout,
body.tutor-lms .tutor-dashboard-layout{padding-top:104px}

@media(max-width:860px){
  .tutor-dashboard-layout{padding:24px 16px 60px}
  body.tutor-dashboard-page .tutor-dashboard-layout,
  body.tutor-lms .tutor-dashboard-layout{padding-top:88px}
}

/* ---------- Video d'ouverture (avant le titre) ----------
   Meme largeur que le bloc d'ouverture, pour rester dans l'axe du reste
   de la page plutot que de deborder en pleine largeur. */
.lp-video-intro{max-width:1180px;margin:0 auto;padding:24px 24px 0}
.lp-video-intro .video{max-width:none}
/* Le fond attenue a 50% sert a poser du texte dessus ailleurs sur le
   site ; ici la vignette EST le contenu, elle reste nette et pleine
   couleur, sans aucun voile — seul le bouton de lecture se pose dessus. */
.lp-video-intro .bg{opacity:1}

@media(max-width:860px){
  .lp-video-intro{padding:16px 20px 0}
}

/* ---------- Choix du pays pour le virement bancaire ----------
   Le panneau de consignes (tunisien / etranger) bascule en CSS pure via
   les combinateurs de fratrie generale ~ : fiable, verifie, fonctionne
   meme sans JavaScript.
   La mise en évidence dorée de l'onglet actif, elle, est pilotée par la
   classe .is-active (voir theme.js) plutôt que par :checked directement :
   ce même mécanisme en CSS pure s'est révélé peu fiable une fois le
   sélecteur combiné à un descendant (fratrie puis label imbriqué), sur
   des éléments déjà présents au chargement de la page. Sans JavaScript,
   les deux onglets restent simplement neutres — le bon compte s'affiche
   tout de même, seule la coloration du bouton actif est en retrait. */
.bank-zone{margin-top:4px}
.bank-zone__radio{position:absolute;opacity:0;width:0;height:0}
.bank-zone__tabs{display:flex;gap:8px;margin-bottom:14px}
.bank-zone__tab{flex:1;text-align:center;padding:10px 12px;border:1px solid var(--line);
  border-radius:999px;font-size:13.5px;font-weight:700;color:var(--ink2);cursor:pointer;
  transition:all .2s}
.bank-zone__tab.is-active{background:var(--gold);border-color:var(--gold);color:#fff}
.bank-zone__panel{display:none}
#dramine-bank-zone-tn:checked ~ .bank-zone__panel[data-zone="tn"],
#dramine-bank-zone-intl:checked ~ .bank-zone__panel[data-zone="intl"]{display:block}