/* FICHAJO — landing « Devenir agent de joueurs »
   Direction éditoriale : blanc dominant, serif large, filets or, hiérarchie forte.
   S'appuie sur les jetons de style.ld-css (marine, or, serif, sans). */

:root{
  --papier:#FCFCFD;
  --encre:#0A1F42;
  --or-clair:#E7D9BE;
  --vert:#1F7A4D;
  --vert-clair:#EDF5F0;
}

body.landing{background:var(--blanc);color:var(--texte)}
.landing ::selection{background:var(--encre);color:#fff}

/* ---------- rythme ---------- */
.landing .ld-bande{padding-block:clamp(64px,9vw,132px)}
.landing .ld-bande-serree{padding-block:clamp(48px,6vw,88px)}
.landing .ld-bande-papier{background:var(--papier);border-block:1px solid var(--ligne)}
.landing .ld-colonne{max-width:70ch}
.landing .ld-centre{margin-inline:auto;text-align:center}
.landing .ld-centre .ld-colonne{margin-inline:auto}

/* ---------- numérotation éditoriale ---------- */
.landing .ld-chapitre{display:flex;align-items:baseline;gap:16px;margin-bottom:22px}
.landing .ld-chapitre .ld-num{font:600 12.5px/1 var(--marque);letter-spacing:.16em;color:var(--or)}
.landing .ld-chapitre .ld-trait{flex:1;height:1px;background:var(--ligne)}
.landing .ld-chapitre .ld-quoi{font:600 12.5px/1 var(--marque);letter-spacing:.16em;text-transform:uppercase;color:var(--ardoise)}

.landing h2.ld-titre{font:600 clamp(28px,3.6vw,44px)/1.16 var(--serif);color:var(--encre);letter-spacing:-.012em;max-width:22ch}
.landing h2.ld-titre.ld-large{max-width:30ch}
.landing .ld-chapo{margin-top:18px;font-size:clamp(17px,1.35vw,19.5px);line-height:1.72;color:var(--ardoise);max-width:62ch}

/* ---------- héros ---------- */
.landing .ld-heros{padding-top:clamp(40px,6vw,86px);padding-bottom:clamp(48px,7vw,96px);background:
  radial-gradient(120% 90% at 100% 0%, #F3F6FB 0%, rgba(255,255,255,0) 60%)}
.landing .ld-heros .ld-grille{display:grid;gap:clamp(32px,4vw,60px);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center}
@media (max-width:1000px){.landing .ld-heros .ld-grille{grid-template-columns:1fr;gap:40px}}

.landing .ld-surtitre{display:flex;align-items:center;gap:12px;font:600 12px/1.4 var(--marque);letter-spacing:.14em;text-transform:uppercase;color:var(--bleu)}
.landing .ld-surtitre::before{content:"";width:28px;height:1px;background:var(--or);flex:none}

.landing h1.ld-titre-heros{
  margin-top:26px;
  font:600 clamp(34px,5.4vw,62px)/1.08 var(--serif);
  color:var(--encre);letter-spacing:-.022em;max-width:15ch;text-wrap:balance}
.landing h1.ld-titre-heros em{font-style:normal;color:var(--or);}
.landing .ld-heros .ld-accroche{margin-top:24px;font-size:clamp(17px,1.4vw,19.5px);line-height:1.7;color:var(--ardoise);max-width:54ch}

.landing .ld-prix-heros{margin-top:34px;padding-top:26px;border-top:1px solid var(--ligne);display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.landing .ld-prix-heros .ld-montant{font:600 clamp(36px,4.4vw,50px)/1 var(--marque);color:var(--encre);letter-spacing:-.02em}
.landing .ld-prix-heros .ld-mention{font-size:14.5px;line-height:1.5;color:var(--ardoise)}

.landing .ld-actions-heros{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.landing .ld-btn-or-plein{background:var(--encre);color:#fff;border-color:var(--encre);min-height:56px;padding:0 30px;font-size:16px}
.landing .ld-btn-or-plein:hover{background:#061634;color:#fff}
.landing .ld-btn-ligne{background:transparent;color:var(--encre);border-color:var(--ligne-forte);min-height:56px;padding:0 26px;font-size:16px}
.landing .ld-btn-ligne:hover{border-color:var(--encre);background:transparent;color:var(--encre)}
@media (max-width:560px){.landing .ld-actions-heros .btn{width:100%}}

.landing .ld-gages{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:13.5px;color:var(--ardoise)}
.landing .ld-gages span{display:flex;align-items:center;gap:7px}
.landing .ld-gages svg{width:14px;height:14px;flex:none;stroke:var(--or);fill:none;stroke-width:2.6}

/* visuel du héros */
.landing .ld-cadre-app{position:relative}
.landing .ld-cadre-app img{border-radius:6px;border:1px solid var(--ligne);box-shadow:0 40px 80px -48px rgba(10,31,66,.5)}
.landing .ld-cadre-app::after{content:"";position:absolute;inset:auto -14px -14px auto;width:56%;height:62%;border:1px solid var(--or-clair);border-radius:6px;z-index:-1}
@media (max-width:1000px){.landing .ld-cadre-app::after{display:none}}

/* ---------- bandeau chiffres ---------- */
.landing .ld-chiffres-bande{border-block:1px solid var(--ligne);background:var(--papier)}
.landing .ld-chiffres-bande .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne)}
.landing .ld-chiffres-bande .wrap{padding-inline:0;max-width:none}
.landing .ld-chiffre{background:var(--papier);padding:26px clamp(16px,3vw,32px);text-align:center}
.landing .ld-chiffre b{display:block;font:600 clamp(24px,2.6vw,32px)/1 var(--marque);color:var(--encre);letter-spacing:-.01em}
.landing .ld-chiffre small{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:var(--ardoise);letter-spacing:.02em}
@media (max-width:760px){.landing .ld-chiffres-bande .wrap{grid-template-columns:repeat(2,1fr)}}

/* ---------- tri d'audience ---------- */
.landing .ld-voies{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);margin-top:44px}
@media (max-width:860px){.landing .ld-voies{grid-template-columns:1fr}}
.landing .ld-voie{border:1px solid var(--ligne);border-radius:8px;padding:clamp(24px,3vw,36px);background:#fff;display:flex;flex-direction:column;gap:16px}
.landing .ld-voie.ld-urgente{border-color:var(--encre);box-shadow:0 20px 50px -34px rgba(10,31,66,.5)}
.landing .ld-voie .ld-quand{font:600 12px/1.3 var(--marque);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.landing .ld-voie h3{font:600 clamp(20px,1.9vw,25px)/1.25 var(--serif);color:var(--encre);max-width:20ch}
.landing .ld-voie p{font-size:15.5px;line-height:1.66;color:var(--ardoise)}
.landing .ld-voie .ld-reste{display:inline-flex;align-items:baseline;gap:8px;padding:9px 15px;border-radius:999px;background:var(--encre);color:#fff;font:600 14px/1 var(--sans);align-self:flex-start}
.landing .ld-voie .ld-reste b{font:600 17px/1 var(--marque)}
.landing .ld-voie.ld-calme .ld-reste{background:var(--vert-clair);color:var(--vert)}
.landing .ld-voie .ld-priorite{margin-top:auto;padding-top:16px;border-top:1px solid var(--ligne);font-size:14.5px;line-height:1.6;color:var(--texte)}
.landing .ld-voie .ld-priorite b{color:var(--encre)}

/* ---------- frise ---------- */
.landing .ld-frise{margin-top:44px;border-top:1px solid var(--ligne);display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.landing .ld-frise{grid-template-columns:1fr}}
.landing .ld-frise .ld-etape{padding:24px 24px 24px 0;border-right:1px solid var(--ligne);position:relative}
.landing .ld-frise .ld-etape:last-child{border-right:0}
@media (max-width:860px){
  .landing .ld-frise .ld-etape{border-right:0;border-bottom:1px solid var(--ligne);padding-right:0}
  .landing .ld-frise .ld-etape:last-child{border-bottom:0}
}
.landing .ld-frise .ld-etape::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--or)}
.landing .ld-frise .ld-etape.ld-passe::before{background:var(--ligne-forte)}
.landing .ld-frise .ld-date{font:600 13px/1.3 var(--marque);letter-spacing:.08em;text-transform:uppercase;color:var(--encre);margin-bottom:6px}
.landing .ld-frise .ld-quoi2{font-size:14.5px;line-height:1.58;color:var(--ardoise);padding-right:16px}
.landing .ld-source{margin-top:22px;font-size:13px;line-height:1.6;color:var(--ardoise)}
.landing .ld-source a{color:var(--bleu)}

/* ---------- deux épreuves ---------- */
.landing .ld-epreuves{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px);margin-top:44px}
@media (max-width:860px){.landing .ld-epreuves{grid-template-columns:1fr}}
.landing .ld-epreuve{padding-top:22px;border-top:2px solid var(--encre)}
.landing .ld-epreuve .ld-qui{font:600 12px/1.3 var(--marque);letter-spacing:.14em;text-transform:uppercase;color:var(--ardoise);margin-bottom:12px}
.landing .ld-epreuve h3{font:600 clamp(20px,1.9vw,24px)/1.25 var(--serif);color:var(--encre);margin-bottom:14px}
.landing .ld-epreuve p{font-size:15.5px;line-height:1.68;color:var(--ardoise)}
.landing .ld-epreuve ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.landing .ld-epreuve li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:var(--texte)}
.landing .ld-epreuve li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--or)}
.landing .ld-avertissement{margin-top:36px;padding:20px 24px;border-left:2px solid var(--or);background:var(--papier);font-size:14.5px;line-height:1.66;color:var(--ardoise)}
.landing .ld-avertissement b{color:var(--encre)}

/* ---------- contenu / captures ---------- */
.landing .ld-galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,26px);margin-top:44px}
@media (max-width:760px){.landing .ld-galerie{grid-template-columns:1fr}}
.landing .ld-vignette figure{margin:0}
.landing .ld-vignette img{border:1px solid var(--ligne);border-radius:6px;box-shadow:0 24px 50px -38px rgba(10,31,66,.45)}
.landing .ld-vignette figcaption{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ardoise)}
.landing .ld-vignette figcaption b{color:var(--encre);font-weight:600}

/* ---------- méthode ---------- */
.landing .ld-piliers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:44px}
@media (max-width:860px){.landing .ld-piliers{grid-template-columns:1fr}}
.landing .ld-pilier{padding-top:20px;border-top:1px solid var(--ligne-forte)}
.landing .ld-pilier .ld-rang{font:600 12px/1 var(--marque);letter-spacing:.14em;color:var(--or);margin-bottom:14px}
.landing .ld-pilier h3{font:600 19px/1.3 var(--sans);color:var(--encre);margin-bottom:10px}
.landing .ld-pilier p{font-size:15px;line-height:1.68;color:var(--ardoise)}

/* ---------- mini-quiz ---------- */
.landing .ld-quiz-bloc{border:1px solid var(--ligne);border-radius:8px;background:#fff;padding:clamp(24px,3.4vw,44px);margin-top:40px}
.landing .ld-quiz-q{font:600 clamp(17px,1.6vw,20px)/1.45 var(--sans);color:var(--encre);margin-bottom:18px}
.landing .ld-quiz-choix{display:grid;gap:10px}
.landing .ld-quiz-choix button{text-align:left;padding:14px 18px;border:1px solid var(--ligne-forte);border-radius:6px;background:#fff;font:400 15.5px/1.5 var(--sans);color:var(--texte);cursor:pointer;transition:border-color .15s,background-color .15s}
.landing .ld-quiz-choix button:hover{border-color:var(--encre)}
.landing .ld-quiz-choix button.juste{border-color:var(--vert);background:var(--vert-clair);color:#14502F}
.landing .ld-quiz-choix button.faux{border-color:var(--rouge);background:#FDF0F2;color:#8C0A20}
.landing .ld-quiz-explique{margin-top:16px;padding:16px 18px;border-left:2px solid var(--or);background:var(--papier);font-size:14.5px;line-height:1.65;color:var(--ardoise)}
.landing .ld-quiz-pied{margin-top:22px;padding-top:20px;border-top:1px solid var(--ligne);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.landing .ld-quiz-pied .ld-compte{font-size:14px;color:var(--ardoise)}

/* ---------- offre ---------- */
.landing .ld-bloc-offre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:44px}
@media (max-width:900px){.landing .ld-bloc-offre{grid-template-columns:1fr}}
.landing .ld-inclus{display:grid;gap:0;margin:0;padding:0;list-style:none}
.landing .ld-inclus li{list-style:none;display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--ligne);font-size:15.5px;line-height:1.55;color:var(--texte)}
.landing .ld-inclus li:first-child{border-top:1px solid var(--ligne)}
.landing .ld-inclus svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--or);fill:none;stroke-width:2.6}
.landing .ld-inclus ul{margin:0;padding:0}

.landing .ld-carte-achat{border:1px solid var(--encre);border-radius:8px;padding:clamp(26px,3vw,36px);background:#fff;box-shadow:0 30px 70px -46px rgba(10,31,66,.55);position:sticky;top:96px}
@media (max-width:900px){.landing .ld-carte-achat{position:static}}
.landing .ld-carte-achat .ld-etiquette{font:600 12px/1.3 var(--marque);letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:16px}
.landing .ld-carte-achat .ld-montant{font:600 clamp(38px,4.6vw,52px)/1 var(--marque);color:var(--encre);letter-spacing:-.02em}
.landing .ld-carte-achat .ld-sous{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--ardoise)}
.landing .ld-carte-achat .btn{width:100%;margin-top:22px}
.landing .ld-carte-achat .ld-fin{margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne);font-size:13px;line-height:1.6;color:var(--ardoise)}

/* ---------- pour qui ---------- */
.landing .ld-deux-colonnes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px);margin-top:44px}
@media (max-width:760px){.landing .ld-deux-colonnes{grid-template-columns:1fr}}
.landing .ld-liste-signe{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.landing .ld-liste-signe li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.6;color:var(--texte)}
.landing .ld-liste-signe li::before{position:absolute;left:0;top:0;font:600 15px/1.6 var(--sans)}
.landing .ld-oui li::before{content:"\2713";color:var(--vert)}
.landing .ld-non li::before{content:"\2014";color:var(--ardoise)}
.landing .ld-sous-titre-col{font:600 13px/1.3 var(--marque);letter-spacing:.12em;text-transform:uppercase;color:var(--ardoise);margin-bottom:18px}

/* ---------- FAQ ---------- */
.landing .ld-faq{margin-top:40px;border-top:1px solid var(--ligne)}
.landing .ld-faq details{border-bottom:1px solid var(--ligne)}
.landing .ld-faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;font:600 17px/1.45 var(--sans);color:var(--encre)}
.landing .ld-faq summary::-webkit-details-marker{display:none}
.landing .ld-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:1.5px solid var(--or);border-bottom:1.5px solid var(--or);transform:rotate(45deg);transition:transform .2s}
.landing .ld-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.landing .ld-faq .ld-rep{padding:0 0 24px;font-size:15.5px;line-height:1.72;color:var(--ardoise);max-width:72ch}
.landing .ld-faq .ld-rep p+p{margin-top:12px}

/* ---------- clôture ---------- */
.landing .ld-cloture{background:var(--encre);color:#fff}
.landing .ld-cloture h2{color:#fff;font:600 clamp(28px,3.6vw,44px)/1.16 var(--serif);letter-spacing:-.012em;max-width:22ch;margin-inline:auto}
.landing .ld-cloture p{margin-top:20px;font-size:17px;line-height:1.7;color:#C2D0E6;max-width:56ch;margin-inline:auto}
.landing .ld-cloture .ld-btn-or-plein{background:var(--or);color:#16223A;border-color:var(--or);margin-top:30px}
.landing .ld-cloture .ld-btn-or-plein:hover{background:#C9A463;color:#16223A}
.landing .ld-cloture .ld-gages{justify-content:center;color:#9FB2D0;margin-top:24px}
.landing .ld-cloture .ld-gages svg{stroke:var(--or)}

/* ---------- pied ---------- */
.landing .ld-pied{border-top:1px solid var(--ligne);padding-block:36px;font-size:13.5px;color:var(--ardoise)}
.landing .ld-pied .wrap{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
.landing .ld-pied a{color:var(--ardoise);text-decoration:none}
.landing .ld-pied a:hover{color:var(--encre);text-decoration:underline}

/* ---------- mini-quiz (markup généré par mini-quiz.ld-js) ---------- */
.landing #mini .question{font:600 clamp(16.5px,1.5vw,19px)/1.45 var(--sans);color:var(--encre);margin:0 0 16px}
.landing #mini .choix{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.landing #mini .choix button{width:100%;display:flex;align-items:flex-start;gap:13px;text-align:left;padding:14px 18px;border:1px solid var(--ligne-forte);border-radius:6px;background:#fff;font:400 15.5px/1.5 var(--sans);color:var(--texte);cursor:pointer;transition:border-color .15s,background-color .15s}
.landing #mini .choix button:hover:not(:disabled){border-color:var(--encre)}
.landing #mini .choix button:disabled{cursor:default}
.landing #mini .choix .lettre{flex:none;font:600 13px/1.5 var(--marque);color:var(--ardoise);letter-spacing:.06em}
.landing #mini .choix button.juste{border-color:var(--vert);background:var(--vert-clair);color:#14502F}
.landing #mini .choix button.juste .lettre{color:var(--vert)}
.landing #mini .choix button.faux{border-color:var(--rouge);background:#FDF0F2;color:#8C0A20}
.landing #mini .choix button.faux .lettre{color:var(--rouge)}
.landing #mini .explication{margin-top:14px;padding:15px 18px;border-left:2px solid var(--or);background:var(--papier);font-size:14.5px;line-height:1.65;color:var(--ardoise)}
.landing #mini .explication strong{color:var(--encre)}
.landing #erreur-paiement{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--rouge)}
.landing #erreur-paiement:empty{display:none}

/* ---------- boutons sur fond marine (clôture) ---------- */
.landing .ld-cloture .btn-fantome{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);min-height:56px;padding:0 26px;font-size:16px}
.landing .ld-cloture .btn-fantome:hover{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.7)}
.landing .ld-cloture .ld-actions-heros{justify-content:center}
@media (max-width:560px){.landing .ld-cloture .ld-actions-heros .btn{width:100%}}

/* ============================================================
   RÉVISION DA — alignement sur fichajo.com
   en-tête de marque, héros photographique, cadres d'appareils
   ============================================================ */

/* ---------- en-tête : la marque complète, comme sur le site ---------- */
.tunnel.landing .entete-min .marque{gap:12px}
.tunnel.landing .entete-min .marque svg{width:30px;height:42px}
.tunnel.landing .entete-min .nom{font:700 20px/1 var(--marque);letter-spacing:.12em;color:var(--marine)}
.tunnel.landing .entete-min .marque .sous{display:block;margin-top:5px;font:600 8px/1 var(--marque);letter-spacing:.15em;text-transform:uppercase;color:var(--ardoise)}
@media (max-width:640px){.tunnel.landing .entete-min .marque .sous{display:none}}

/* ---------- héros : la photographie reprend la main ---------- */
.ld-visuel-heros{position:relative}
.ld-visuel-heros>img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 24px 60px -28px rgba(10,31,66,.5)}
.ld-carte-date{position:absolute;left:24px;bottom:24px;right:24px;max-width:320px;padding:18px 20px;border-radius:12px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);box-shadow:0 12px 34px -16px rgba(10,31,66,.45)}
.ld-carte-date .ld-eti{margin:0;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ardoise)}
.ld-carte-date .ld-jour{margin:8px 0 0;font:600 21px/1.15 var(--serif);color:var(--marine)}
.ld-carte-date .ld-ou{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ardoise)}
@media (max-width:760px){.ld-carte-date{position:static;max-width:none;margin-top:14px;box-shadow:none;border:1px solid var(--ligne)}}

/* ---------- cadres d'appareils ---------- */
.ld-scene{margin-top:clamp(28px,4vw,48px)}
.ld-scene+.ld-scene{margin-top:clamp(36px,5vw,72px)}

/* navigateur de bureau */
.ld-bureau{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--ligne-forte);
  box-shadow:0 30px 70px -34px rgba(10,31,66,.55)}
.ld-bureau .ld-chrome{display:flex;align-items:center;gap:7px;padding:0 14px;height:38px;background:#F1F3F7;border-bottom:1px solid var(--ligne)}
.ld-bureau .ld-chrome i{width:10px;height:10px;border-radius:50%;background:#D5D9E2;flex:none}
.ld-bureau .ld-chrome span{margin-left:12px;padding:3px 14px;border-radius:20px;background:#fff;border:1px solid var(--ligne);
  font:500 12px/1.4 var(--sans);color:var(--ardoise);letter-spacing:.02em}
.ld-bureau img{display:block;width:100%;height:auto}

/* tablette */
.ld-tablette{padding:14px;border-radius:22px;background:linear-gradient(160deg,#20304F,#101E38);
  box-shadow:0 30px 70px -32px rgba(10,31,66,.6)}
.ld-tablette>div{border-radius:10px;overflow:hidden;background:#fff}
.ld-tablette img{display:block;width:100%;height:auto}

/* téléphone */
.ld-telephone{width:100%;max-width:300px;padding:11px;border-radius:34px;background:linear-gradient(160deg,#20304F,#101E38);
  box-shadow:0 26px 60px -30px rgba(10,31,66,.6)}
.ld-telephone>div{position:relative;border-radius:25px;overflow:hidden;background:#fff}
.ld-telephone>div::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:96px;height:20px;background:#101E38;border-radius:0 0 12px 12px;z-index:2}
.ld-telephone img{display:block;width:100%;height:auto}

/* deux colonnes : un écran + son commentaire */
.ld-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.ld-duo.ld-duo-etroit{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ld-duo h3{margin:0;font:600 clamp(20px,2.2vw,26px)/1.25 var(--serif);color:var(--encre)}
.ld-duo p{margin:14px 0 0;font-size:16px;line-height:1.7;color:var(--ardoise)}
@media (max-width:820px){.ld-duo,.ld-duo.ld-duo-etroit{grid-template-columns:1fr}}

/* bande de détail : une capture large, posée sur le papier */
.ld-detail{padding:clamp(20px,3vw,34px);border-radius:14px;background:var(--papier);border:1px solid var(--ligne)}
.ld-detail img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 12px 30px -18px rgba(10,31,66,.45)}
.ld-detail figcaption,.ld-legende{margin:16px 0 0;font-size:15px;line-height:1.65;color:var(--ardoise)}
.ld-detail figcaption b,.ld-legende b{color:var(--encre);font-weight:600}
.ld-detail figure{margin:0}

/* photographie de section */
.ld-photo-bande{margin-top:clamp(28px,4vw,48px);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(10,31,66,.45)}
.ld-photo-bande img{display:block;width:100%;height:auto}
.ld-photo-bande figcaption{padding:14px 18px;background:var(--marine);color:rgba(255,255,255,.82);
  font-size:13.5px;line-height:1.55}

/* ---------- héros : la vidéo occupe la place de la photo ---------- */
.ld-video-heros{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 24px 60px -28px rgba(10,31,66,.5);background:var(--marine)}
.ld-visuel-heros>video+figcaption{z-index:2}

/* ---------- deux téléphones côte à côte ---------- */
.ld-telephones{display:flex;justify-content:center;gap:clamp(12px,2vw,26px)}
.ld-telephones .ld-telephone{max-width:236px;flex:1 1 0}
.ld-telephone-decale{margin-top:clamp(22px,4vw,46px)}
/* pas d'encoche : les captures n'ont plus de barre d'état */
.ld-telephone>div::before{display:none}
@media (max-width:480px){.ld-telephones .ld-telephone:last-child{display:none}
  .ld-telephones .ld-telephone{max-width:280px}}

/* ============================================================
   HÉROS COMPOSITE — fond cinéma généré + interfaces réelles nettes
   Le décor bouge, les écrans restent nets : c'est ce qui distingue
   un film produit d'une vidéo d'interface générée.
   ============================================================ */
.ld-scene-heros{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:16/10;
  background:radial-gradient(120% 90% at 22% 12%, #23375C 0%, #14274A 45%, #0B1B33 100%);
  box-shadow:0 30px 70px -30px rgba(10,31,66,.62)}
.ld-fond-heros{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;opacity:.9}
.ld-scene-heros::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,27,51,.12) 0%,rgba(11,27,51,0) 40%,rgba(11,27,51,.5) 100%)}

.ld-heros-bureau{position:absolute;left:4%;top:9%;width:74%;z-index:2;
  animation:ld-flotte 11s ease-in-out infinite}
.ld-heros-bureau .ld-bureau{box-shadow:0 34px 64px -24px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.06)}
.ld-heros-tel{position:absolute;right:4.5%;bottom:5%;width:19%;min-width:104px;z-index:3;
  animation:ld-flotte 9s ease-in-out infinite reverse}
.ld-heros-tel .ld-telephone{width:100%;max-width:none;padding:7px;border-radius:22px;
  box-shadow:0 26px 48px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.ld-heros-tel .ld-telephone>div{border-radius:15px}
@keyframes ld-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.ld-heros-bureau,.ld-heros-tel{animation:none}}
@media (max-width:620px){
  .ld-scene-heros{aspect-ratio:4/3}
  .ld-heros-bureau{left:3%;top:12%;width:82%}
  .ld-heros-tel{width:24%;right:3%;bottom:7%}
}