/* ============================================================
   Orange.com « Inside the box » — version mobile
   28/10 : première passe (l'unité --u passe de 1/1729 à 1/600 de la largeur).
   31/10 : la logique de sa maquette mobile (mobile-ecrans.html) appliquée à la VRAIE page : plus de menu en haut (le burger vit dans la barre),
   la barre a trois formes (hero / standard / conversation), le carré orange est à gauche, le résumé orange de l'actualité sort de derrière la barre,
   l'article est écrit sur la photo, chaque bloc fait un écran, aucune ombre.
   ============================================================ */
@media (max-width: 767px){
  /* le carré du hero : toute la largeur, collé en bas (comme le carré de sa maquette : il s'ouvre par le haut) */
  :root{--u:calc(100vw / 600);--sq:100vw;--sq-top:calc(100vh - 100vw);--bar-top:calc(100vh - 105px);--bw:calc(100vw - 82px);--bh:66px}
  html,body{min-width:0 !important}
  html{scroll-snap-type:y proximity}
  #groupe, #accueil{overflow-x:clip}   /* les cartes d'actualité hors écran ne font plus déborder la page ; clip (et non hidden) garde l'effet collé des récits */
  .recit-wrap, .actus-hero, #accueil .w-monde, #accueil .w-bloc:has(> .w-tv), #accueil .w-docs, #accueil .w-chiffres.premier, #accueil #expertises, #accueil .w-pied{scroll-snap-align:start}

  /* ---------- nav : le logo seul en haut à gauche ; le menu s'ouvre depuis la barre ---------- */
  .nav .gauche,.nav .droite{display:none}
  .logo{left:15px;top:14px;width:25px;height:25px}
  .nav .burger{display:none}

  /* ---------- la barre IA : trois formes, --k = 0 forme hero (41 / 39 / 66, grise, étoile orange), 1 forme standard (21 / 13 / 64, blanche, carré orange) ;
     sur l'accueil --k suit --pb (la barre prend sa forme standard quand la phrase arrive) ; la conversation reprend la forme hero, en blanc ---------- */
  body{--k:1}
  body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert), body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert) :is(#barre, .clip){--k:var(--pb, 0)}   /* 05/11 : --pb est posé sur la barre et la bande (index.html, pose) */
  body.conversation{--k:0}
  .barre{top:calc(100vh - 107px + 22px * var(--k)) !important;left:calc(41px - 20px * var(--k)) !important;width:calc(100vw - 82px + 40px * var(--k)) !important;height:calc(66px - 2px * var(--k)) !important;padding:0 !important;gap:0;transform:none;translate:none;opacity:1;box-shadow:none;background:rgb(calc(240 + 15 * var(--k)) calc(240 + 15 * var(--k)) calc(240 + 15 * var(--k)));transition:top .5s cubic-bezier(.2,.7,.15,1), left .5s cubic-bezier(.2,.7,.15,1), width .5s cubic-bezier(.2,.7,.15,1), height .5s cubic-bezier(.2,.7,.15,1), background-color .5s, opacity .4s}
  body.barre-suivie:not(.conversation):not(.menu-ouvert) .barre, body.menu-ouvert .barre, body.conversation .barre{transition-property:top, left, width, height, background-color, opacity;transition-duration:.5s, .5s, .5s, .5s, .5s, .4s;transition-timing-function:cubic-bezier(.2,.7,.15,1)}
  body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert) .barre{transition:opacity .4s}   /* pendant le hero, la barre est pilotée par le défilement : pas de transition */
  body.conversation .barre{background:#fff}
  body.pied-vu:not(.menu-ouvert):not(.conversation) .barre{translate:none !important;opacity:1 !important;pointer-events:auto}   /* la barre reste sur le pied (le pied n'a pas sa propre barre ici) */
  .barre::before{display:none}
  .barre .voile{display:none}
  .barre .champ{order:0;padding-left:calc(18px * var(--k));padding-right:6px}
  .barre input,.roll{font-size:15px}
  .barre .ico{display:none !important}
  /* le carré orange, à gauche : transparent avec l'étoile orange en forme hero, carré orange à étoile blanche en forme standard */
  .barre .envoi, body.barre-pilotee .barre .envoi, body.barre-basse .barre .envoi, body.menu-ouvert #barre .envoi, body.conversation #barre .envoi{order:-1;position:relative;flex:none;width:calc(66px - 2px * var(--k)) !important;height:100% !important;margin:0;background:rgba(255,121,0,var(--k));transform:none;transition:background-color .5s}
  .barre .envoi > svg{justify-self:center;margin:0}
  .barre .envoi .etoile{width:19px;height:19px;opacity:var(--k);transition:opacity .5s}
  .barre .envoi .etoile path{fill:#fff}
  .barre .envoi::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1c.7 4.6 3.7 7.6 8.3 8.3-4.6.7-7.6 3.7-8.3 8.3-.7-4.6-3.7-7.6-8.3-8.3C6.3 8.6 9.3 5.6 10 1z' fill='%23ff7900'/%3E%3Cpath d='M16.2 1.2c.2 1.3 1 2.1 2.3 2.3-1.3.2-2.1 1-2.3 2.3-.2-1.3-1-2.1-2.3-2.3 1.3-.2 2.1-1 2.3-2.3z' fill='%23ff7900'/%3E%3C/svg%3E") center / 19px no-repeat;opacity:calc(1 - var(--k));transition:opacity .5s;pointer-events:none}
  body.pied-vu:not(.menu-ouvert):not(.conversation) .barre .envoi{background:#fff}   /* sur le pied orange : carré blanc, étoile orange */
  body.pied-vu:not(.menu-ouvert):not(.conversation) .barre .envoi .etoile{opacity:0}
  body.pied-vu:not(.menu-ouvert):not(.conversation) .barre .envoi::after{opacity:1}
  .barre .envoi .resume{display:none}
  .barre .envoi .pts{position:static}
  /* le burger, dans la barre, à droite : un carré de la hauteur de la barre, l'icône de 18 px à 17 px du bord (hero) puis 12 px (standard) */
  .barre .burger-b{display:block;order:2;position:relative;flex:none;width:auto;aspect-ratio:1 / 1;height:100%;margin-right:calc(17px - 5px * var(--k) - 18px);background:none;border:0;padding:0;cursor:pointer}
  .barre .burger-b i{position:absolute;left:50%;top:50%;width:18px;height:2px;margin-left:-9px;background:#000;transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s}
  .barre .burger-b i:nth-child(1){transform:translateY(-7px)} .barre .burger-b i:nth-child(2){transform:translateY(-1px)} .barre .burger-b i:nth-child(3){transform:translateY(5px)}
  body.conversation .barre .burger-b i:nth-child(1), body.menu-ouvert .barre .burger-b i:nth-child(1){transform:translateY(-1px) rotate(45deg)}
  body.conversation .barre .burger-b i:nth-child(2), body.menu-ouvert .barre .burger-b i:nth-child(2){opacity:0}
  body.conversation .barre .burger-b i:nth-child(3), body.menu-ouvert .barre .burger-b i:nth-child(3){transform:translateY(-1px) rotate(-45deg)}
  /* dans la barre : plus de carte d'article (elle est sur la photo), plus de navigation de la carte */
  .barre .article, .barre .monde-nav{display:none !important}
  .barre .player .savoir{font-size:13px}
  #barre .auteur-b{gap:12px}
  #barre .auteur-b .portrait{width:62px;height:62px}
  #barre .auteur-b b{font-size:15px}
  #barre .auteur-b .fn, #barre .auteur-b small{font-size:10px}
  .alerte-clip{display:none}

  /* ---------- la barre orange du résumé (accueil, l'actualité) : sort de derrière la barre, à sa largeur, 52 px ; ouverte, elle monte à 62,5 % de l'écran ---------- */
  .clip{position:fixed;z-index:38;left:21px;right:21px;top:0;bottom:77px;overflow:hidden;pointer-events:none}
  .panneau{position:absolute;left:0;right:0;bottom:0;height:52px;background:var(--orange);color:#fff;transform:translateY(100%);transition:transform .6s cubic-bezier(.2,.7,.15,1), height .6s cubic-bezier(.2,.7,.15,1);overflow:hidden;pointer-events:auto}
  .panneau.visible{transform:none}
  .panneau.ouvert{height:calc(62.5vh - 85px)}
  .panneau .ligne{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:17px;padding:0 17px 0 26px;cursor:pointer;transition:opacity .3s}
  .panneau.ouvert .ligne{opacity:0;pointer-events:none}
  .panneau .ligne .texte{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .panneau .fleche{flex:none;width:18px;height:18px}
  .panneau .fleche svg{display:block;width:100%;height:100%}
  .panneau .bloc{position:absolute;inset:0 30px 0 27px;padding-top:24px;opacity:0;transform:translateY(10px);transition:opacity .4s, transform .5s cubic-bezier(.2,.7,.15,1);pointer-events:none;overflow:hidden}
  .panneau.ouvert .bloc{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
  .panneau .bloc .tete{display:flex;align-items:flex-start;gap:16px}
  .panneau .bloc .tete div{flex:1;font-weight:700;font-size:12px;line-height:1.5}
  .panneau .bloc .tete div small{display:block;font-size:12px;color:rgba(255,255,255,.65)}
  .panneau .bloc .tete button{flex:none;width:18px;height:18px;margin-top:3px;background:none;border:0;padding:0;cursor:pointer}
  .panneau .bloc .tete button svg{display:block;width:100%;height:100%}
  .panneau .bloc h3{margin:26px 0 0;font-family:var(--hn);font-weight:700;font-size:15px;line-height:1.2}
  .panneau .bloc p{margin:26px 0 0;font-size:13px;line-height:1.38;white-space:pre-wrap}
  body.conversation .clip, body.menu-ouvert .clip{display:none}

  /* ---------- hero : le cadre, la vidéo, le titre ---------- */
  .carre video, .carre img{transform:none}   /* le carré est collé aux bords : la vidéo le remplit, sans le petit dézoom du bureau */
  .carre .titre-video-hero{width:92vw;white-space:normal;--haut:40px}
  .carre .titre-video-hero h2{font-size:42px;line-height:1}
  .carre .titre-video-hero .mot-v{white-space:normal}
  .carre .titre-video-hero small{width:92vw;white-space:normal;font-size:12px;bottom:calc(100% + 18px);line-height:1.4}

  /* ---------- la phrase ---------- */
  .phrase{padding:0 0 90px}
  .phrase p{width:92vw;font-size:32px;line-height:1.1}
  .phrase .cta-recit{margin-top:28px}
  #recit-wrap-2 .phrase p{font-size:28px}   /* « Orange ▾ et ses expertises » tient sur la largeur */
  #accueil .w-article-groupe{grid-template-columns:1fr;gap:20px;padding:40px 16px 60px}
  #accueil .w-article-groupe h2{font-size:22px}
  #accueil .w-monde .liens{flex-direction:column;align-items:center;gap:10px}

  /* ---------- blocs : marges, grilles, tailles de texte ---------- */
  .w-bloc{padding-left:18px !important;padding-right:18px !important}
  .w-h1{font-size:30px;line-height:1.05} .w-h2{font-size:24px;line-height:1.1}
  .w-p,.w-chapo{font-size:15px;line-height:1.45} .w-sur{font-size:11px} .w-lien{font-size:13px}
  .btn{font-size:13px;line-height:38px;padding:0 16px}
  .w-entete{flex-direction:column;align-items:flex-start;gap:10px}
  .grille{grid-template-columns:1fr 1fr !important;gap:18px !important}
  .w-chiffre b{font-size:30px} .w-chiffre span{font-size:12px} .w-chiffre small{font-size:9px}
  #accueil .w-chiffres{padding:30px 16px 60px}
  #accueil .w-expertises{padding:0 16px 70px}
  #accueil .w-expertises .grille-exp{grid-template-columns:1fr 1fr;gap:12px}
  #accueil .carte-exp b{font-size:14px}
  #accueil .carte-exp .etiquette{box-shadow:none}
  #accueil .w-profils .boite{width:92vw;height:auto;padding:24px}
  /* les publications : un écran, centré ; les boutons sous le titre */
  .w-doc{grid-template-columns:32px 1fr;gap:10px 14px}
  .w-doc .type{width:32px;height:32px}
  .w-doc .actions{grid-column:2;gap:8px}
  .w-doc .actions .btn{font-size:12px;line-height:34px;padding:0 12px}
  #accueil .w-docs{min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:0 !important;padding-bottom:90px !important}
  /* le pied : un écran orange ; pas de barre dans le pied, la barre fixe reste */
  .w-pied{min-height:100vh;box-sizing:border-box;padding:70px 0 120px}
  .w-pied .pied-in{width:auto;padding:0 16px}
  .w-pied .colonnes{grid-template-columns:1fr 1fr;gap:24px}
  .w-pied li{line-height:2}
  .pied-barre{height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden;visibility:hidden}   /* pas display:none : commun.js mesure sa position pour savoir si le pied est en vue */
  .w-pied .legal{flex-wrap:wrap;justify-content:flex-start;gap:10px 18px;margin-top:40px}

  /* ---------- l'actualité du Groupe (sa maquette) : titre à 11 vh, « Agenda complet » dessous, les lignes à 29 vh, la photo de 34 vh jusqu'en bas, l'article écrit dessus ---------- */
  .actus-hero{--sqa:100vw;height:100vh;overflow:clip}
  .titre-actu{top:11vh;height:auto;font-size:25px;transform:translate(-50%, 8px)}
  .actus-hero.vu .titre-actu{transform:translate(-50%, 0)}
  .actus-hero .agenda-m{position:absolute;left:50%;top:calc(11vh + 46px);translate:-50% 0;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:700;font-size:13px;color:#000;text-decoration:none;opacity:0;transition:opacity .6s .2s}
  .actus-hero.vu .agenda-m{opacity:1}
  .actus-hero .agenda-m::after{display:inline-block;content:"";width:.78em;height:.78em;background:currentColor;-webkit-mask:var(--fleche) center / contain no-repeat;mask:var(--fleche) center / contain no-repeat;vertical-align:-.06em;color:var(--orange)}
  .actus-hero .tout-actus{top:calc(11vh + 64px);translate:-50% 0;font-size:13px}
  .bande-actus{top:34vh;height:66vh;transform:none !important}
  .carte-actu{height:66vh;translate:calc(var(--k) * var(--sqa)) 0}
  .carte-actu::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.05) 55%)}
  .carte-agenda::before{display:none}
  .carte-actu .infos{display:block;position:absolute;z-index:2;left:35px;right:35px;top:40px;color:#fff}
  .carte-actu .infos small{display:block;font-size:10px;font-weight:700;color:rgba(255,255,255,.85)}
  .carte-actu .infos small b{color:var(--orange)}
  .carte-actu .infos h3{margin:22px 0 0;font-family:var(--hn);font-weight:700;font-size:16px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .actus-hero.vu .carte-actu{opacity:1}
  .points-actus{top:29vh;transform:translateX(-50%);width:calc(100vw - 82px);gap:8px}
  .points-actus i{height:2.5px;background:#d4d4d4}
  .carte-agenda .w-agenda{width:calc(100vw - 70px);right:35px;color:#000}

  /* ---------- accueil : les blocs qui font un écran sur ordinateur font un écran ici aussi (30/10) ---------- */
  #accueil .w-chiffres.premier{min-height:53vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:0 16px 24px}   /* le bloc qui suit le récit remplit l'écran sous le titre « Orange ▾ en chiffres » */
  #accueil .w-chiffres.premier .w-lien.centre{margin-top:28px}
  #accueil #expertises.apres-recit{min-height:54vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:0 16px 24px}
  #accueil .w-expertises .w-lien.centre{margin-top:24px}
  #accueil .w-bloc:has(> .w-tv){height:100vh !important;min-height:0}                      /* Trust the future, la Fondation : la photo sur tout l'écran */
  #accueil .w-tv .w-vis{position:absolute;inset:0;height:auto !important;min-height:0;aspect-ratio:auto}
  #accueil .w-tv .w-vis::after{background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 40%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.7))}
  #accueil .w-tv .w-titre{left:24px;right:24px;width:auto;top:13vh;transform:none}
  #accueil .w-tv .w-h2{font-size:38px;line-height:1.02}
  #accueil .w-tv > div:not(.w-vis):not(.w-titre){left:24px;right:24px;width:auto;top:auto;bottom:112px;transform:none}
  #accueil .w-tv .w-p{font-size:15px}
  #accueil .w-tv .w-vis .w-legende{left:24px;right:24px;bottom:88px;font-size:9px;text-align:left}
  #accueil .w-monde{padding:60px 16px 110px !important}
  #accueil .w-monde .liens{margin-top:28px}

  /* ---------- menu et conversation : empilés ---------- */
  .menu{overflow:auto;padding-bottom:100px}
  .menu .cadre{display:none}
  .menu .colonne,.menu .colonne.gauche,.menu .colonne.droite{position:static;width:auto;height:auto;padding:0 20px;margin-top:24px}
  .menu .colonne.gauche{margin-top:70px}
  .menu .colonne > h4{font-size:12px}
  .conv .cadre{left:0 !important;top:0 !important;width:100vw !important;height:100vh !important;transform:none !important}

  .bascule-mobile{display:none}
}

/* 04/11 : la bande orange des citations (l'auteur) et l'article sur la photo, sur toutes les pages (commun.js, bandeMobile) */
@media (max-width: 767px){
  .panneau:not(.article):not(.ouvert){height:64px}
  .panneau .ligne .portrait{flex:none;width:64px;height:64px;margin-left:-26px;background:center / cover no-repeat}
  .panneau .ligne .qui{flex:1;min-width:0;font-weight:700;font-size:13px;line-height:1.25}
  .panneau .ligne .qui span{display:block;font-size:12px;font-weight:400}
  .panneau:not(.article) .ligne{height:64px}
}
@media (max-width: 767px){
  /* en mobile, la barre ne porte ni l'article ni l'auteur (ils sont dans la bande orange) : son texte reste en place */
  body.barre-pilotee.mode-actu .barre input, body.barre-pilotee.mode-actu .barre .ico, body.barre-pilotee.mode-cit .barre input, body.barre-pilotee.mode-cit .barre .ico{transform:none !important;opacity:1 !important}
  body.barre-pilotee.mode-actu .roll, body.barre-pilotee.mode-cit .roll{transform:none !important;opacity:.4 !important}
  body.mode-cit #barre .auteur-b, body.mode-actu #barre-article{display:none !important}
}
@media (max-width: 767px){
  .clip{left:calc(41px - 20px * var(--k));right:auto;bottom:auto;width:calc(100vw - 82px + 40px * var(--k));height:calc(100vh - 107px + 22px * var(--k))}   /* calée sur la barre (ses deux formes), même si la page déborde en largeur */
}

/* 04/11 (2) : réglages de la nav mobile */
@media (max-width: 767px){
  /* le menu s'ouvre sans rien déplacer : le carré orange de l'étoile garde sa taille (une règle d'ordinateur le rapetissait) */
  body.menu-ouvert #barre.barre .envoi, body.conversation #barre.barre .envoi{width:calc(66px - 2px * var(--k)) !important;height:100% !important}
  /* le bloc du burger : fond gris très clair dès le premier défilement, et ensuite partout */
  body.deja-defile .barre .burger-b{background:#f8f8f8}   /* 05/11 : plus clair que le gris du site */
  /* le logo Orange conforme : la barre blanche aux proportions du logo (calée en --u, elle se décalait quand le logo passe à 25 px) */
  .logo::after{left:14.7%;bottom:14.77%;width:70.58%;height:14.71%}
  /* le menu : une catégorie ouvre ses sous-liens en plein écran, sur sa photo, avec un retour */
  body.menu-categorie .menu .cadre{display:block !important;position:fixed !important;left:0 !important;top:0 !important;right:auto !important;width:100vw !important;height:100vh !important;margin:0 !important;transform:none !important;z-index:6;overflow:auto;background:#000}
  body.menu-categorie .menu .cadre > img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover}
  body.menu-categorie .menu .cadre .voile{position:absolute !important;inset:0 !important;opacity:1 !important;background:rgba(0,0,0,.62) !important}
  body.menu-categorie .menu .cadre .sous{position:relative !important;inset:auto !important;width:auto !important;height:auto !important;padding:112px 24px 130px !important;transform:none !important;opacity:1 !important;color:#fff}
  body.menu-categorie .menu .cadre .sous .liste{position:static !important;width:auto !important;transform:none !important;opacity:1 !important}
  body.menu-categorie .menu .cadre .sous .ligne a, body.menu-categorie .menu .cadre .sous .grp-titre{font-size:17px !important;line-height:1.35}
  body.menu-categorie .menu .cadre .sous .ligne a, body.menu-categorie .menu .cadre .sous .grp-titre, body.menu-categorie .menu .cadre .sous .grp-liste a:not(.bouton-menu){color:#fff !important}   /* lisibles sur la photo ; le + reste orange */
  body.menu-ouvert.menu-categorie #barre.barre{opacity:1 !important;pointer-events:auto !important}   /* la barre reste là, comme dans le reste du menu */
  body.menu-categorie .menu .retour-m{display:flex;position:fixed;z-index:7;left:20px;top:58px;align-items:center;gap:10px;background:none;border:0;padding:0;color:#fff;font-weight:700;font-size:14px;cursor:pointer}
  body.menu-categorie .menu .retour-m svg{width:16px;height:16px}
}

.retour-m{display:none}   /* 04/11 : le retour « ← Menu » des catégories n'existe qu'en mobile (règle ci-dessus) */

/* ============================================================
   05/11 : VERSION iPAD — la page d'ordinateur avec la nav du mobile.
   `html.tablette` est posée par commun.js (écran tactile d'au moins 768 px, ou ?ipad). Ci-dessous, les règles de NAV du mobile
   (au-dessus, dans les @media (max-width: 767px)) recopiées sous html.tablette : logo seul, barre en bas avec le burger, bande orange, menu du mobile.
   La mise en page des blocs reste celle de l'ordinateur. Toute retouche de la nav mobile ci-dessus est à reporter ici.
   ============================================================ */
html.tablette, html.tablette body{min-width:0 !important}
  /* ---------- nav : le logo seul en haut à gauche ; le menu s'ouvre depuis la barre ---------- */
  html.tablette .nav .gauche,html.tablette .nav .droite{display:none}
  html.tablette .logo{left:15px;top:14px;width:25px;height:25px}
  html.tablette .nav .burger{display:none}
  /* ---------- la barre IA : trois formes, --k = 0 forme hero (41 / 39 / 66, grise, étoile orange), 1 forme standard (21 / 13 / 64, blanche, carré orange) ; */
  html.tablette body{--k:1}
  html.tablette body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert), html.tablette body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert) :is(#barre, .clip){--k:var(--pb, 0)}
  html.tablette body.conversation{--k:0}
  html.tablette .barre{top:calc(100vh - 107px + 22px * var(--k)) !important;left:calc(41px - 20px * var(--k)) !important;width:calc(100vw - 82px + 40px * var(--k)) !important;height:calc(66px - 2px * var(--k)) !important;padding:0 !important;gap:0;transform:none;translate:none;opacity:1;box-shadow:none;background:rgb(calc(240 + 15 * var(--k)) calc(240 + 15 * var(--k)) calc(240 + 15 * var(--k)));transition:top .5s cubic-bezier(.2,.7,.15,1), left .5s cubic-bezier(.2,.7,.15,1), width .5s cubic-bezier(.2,.7,.15,1), height .5s cubic-bezier(.2,.7,.15,1), background-color .5s, opacity .4s}
  html.tablette body.barre-suivie:not(.conversation):not(.menu-ouvert) .barre,html.tablette body.menu-ouvert .barre,html.tablette body.conversation .barre{transition-property:top, left, width, height, background-color, opacity;transition-duration:.5s, .5s, .5s, .5s, .5s, .4s;transition-timing-function:cubic-bezier(.2,.7,.15,1)}
  html.tablette body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert) .barre{transition:opacity .4s}   /* pendant le hero, la barre est pilotée par le défilement : pas de transition */
  html.tablette body.conversation .barre{background:#fff}
  html.tablette body.pied-vu:not(.menu-ouvert):not(.conversation) .barre{translate:none !important;opacity:1 !important;pointer-events:auto}   /* la barre reste sur le pied (le pied n'a pas sa propre barre ici) */
  html.tablette .barre::before{display:none}
  html.tablette .barre .voile{display:none}
  html.tablette .barre .champ{order:0;padding-left:calc(18px * var(--k));padding-right:6px}
  html.tablette .barre input,html.tablette .roll{font-size:15px}
  html.tablette .barre .ico{display:none !important}
  /* le carré orange, à gauche : transparent avec l'étoile orange en forme hero, carré orange à étoile blanche en forme standard */
  html.tablette .barre .envoi,html.tablette body.barre-pilotee .barre .envoi,html.tablette body.barre-basse .barre .envoi,html.tablette body.menu-ouvert #barre .envoi,html.tablette body.conversation #barre .envoi{order:-1;position:relative;flex:none;width:calc(66px - 2px * var(--k)) !important;height:100% !important;margin:0;background:rgba(255,121,0,var(--k));transform:none;transition:background-color .5s}
  html.tablette .barre .envoi > svg{justify-self:center;margin:0}
  html.tablette .barre .envoi .etoile{width:19px;height:19px;opacity:var(--k);transition:opacity .5s}
  html.tablette .barre .envoi .etoile path{fill:#fff}
  html.tablette .barre .envoi::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1c.7 4.6 3.7 7.6 8.3 8.3-4.6.7-7.6 3.7-8.3 8.3-.7-4.6-3.7-7.6-8.3-8.3C6.3 8.6 9.3 5.6 10 1z' fill='%23ff7900'/%3E%3Cpath d='M16.2 1.2c.2 1.3 1 2.1 2.3 2.3-1.3.2-2.1 1-2.3 2.3-.2-1.3-1-2.1-2.3-2.3 1.3-.2 2.1-1 2.3-2.3z' fill='%23ff7900'/%3E%3C/svg%3E") center / 19px no-repeat;opacity:calc(1 - var(--k));transition:opacity .5s;pointer-events:none}
  html.tablette .barre .envoi .resume{display:none}
  html.tablette .barre .envoi .pts{position:static}
  /* le burger, dans la barre, à droite : un carré de la hauteur de la barre, l'icône de 18 px à 17 px du bord (hero) puis 12 px (standard) */
  html.tablette .barre .burger-b{display:block;order:2;position:relative;flex:none;width:auto;aspect-ratio:1 / 1;height:100%;margin-right:calc(17px - 5px * var(--k) - 18px);background:none;border:0;padding:0;cursor:pointer}
  html.tablette .barre .burger-b i{position:absolute;left:50%;top:50%;width:18px;height:2px;margin-left:-9px;background:#000;transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s}
  html.tablette .barre .burger-b i:nth-child(1){transform:translateY(-7px)} html.tablette .barre .burger-b i:nth-child(2){transform:translateY(-1px)} html.tablette .barre .burger-b i:nth-child(3){transform:translateY(5px)}
  html.tablette body.conversation .barre .burger-b i:nth-child(1),html.tablette body.menu-ouvert .barre .burger-b i:nth-child(1){transform:translateY(-1px) rotate(45deg)}
  html.tablette body.conversation .barre .burger-b i:nth-child(2),html.tablette body.menu-ouvert .barre .burger-b i:nth-child(2){opacity:0}
  html.tablette body.conversation .barre .burger-b i:nth-child(3),html.tablette body.menu-ouvert .barre .burger-b i:nth-child(3){transform:translateY(-1px) rotate(-45deg)}
  /* dans la barre : plus de carte d'article (elle est sur la photo), plus de navigation de la carte */
  html.tablette .barre .article,html.tablette .barre .monde-nav{display:none !important}
  html.tablette .barre .player .savoir{font-size:13px}
  html.tablette #barre .auteur-b{gap:12px}
  html.tablette #barre .auteur-b .portrait{width:62px;height:62px}
  html.tablette #barre .auteur-b b{font-size:15px}
  html.tablette #barre .auteur-b .fn,html.tablette #barre .auteur-b small{font-size:10px}
  html.tablette .alerte-clip{display:none}
  /* ---------- la barre orange du résumé (accueil, l'actualité) : sort de derrière la barre, à sa largeur, 52 px ; ouverte, elle monte à 62,5 % de l'écran ---------- */
  html.tablette .clip{position:fixed;z-index:38;left:21px;right:21px;top:0;bottom:77px;overflow:hidden;pointer-events:none}
  html.tablette .panneau{position:absolute;left:0;right:0;bottom:0;height:52px;background:var(--orange);color:#fff;transform:translateY(100%);transition:transform .6s cubic-bezier(.2,.7,.15,1), height .6s cubic-bezier(.2,.7,.15,1);overflow:hidden;pointer-events:auto}
  html.tablette .panneau.visible{transform:none}
  html.tablette .panneau.ouvert{height:calc(62.5vh - 85px)}
  html.tablette .panneau .ligne{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:17px;padding:0 17px 0 26px;cursor:pointer;transition:opacity .3s}
  html.tablette .panneau.ouvert .ligne{opacity:0;pointer-events:none}
  html.tablette .panneau .ligne .texte{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.tablette .panneau .fleche{flex:none;width:18px;height:18px}
  html.tablette .panneau .fleche svg{display:block;width:100%;height:100%}
  html.tablette .panneau .bloc{position:absolute;inset:0 30px 0 27px;padding-top:24px;opacity:0;transform:translateY(10px);transition:opacity .4s, transform .5s cubic-bezier(.2,.7,.15,1);pointer-events:none;overflow:hidden}
  html.tablette .panneau.ouvert .bloc{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
  html.tablette .panneau .bloc .tete{display:flex;align-items:flex-start;gap:16px}
  html.tablette .panneau .bloc .tete div{flex:1;font-weight:700;font-size:12px;line-height:1.5}
  html.tablette .panneau .bloc .tete div small{display:block;font-size:12px;color:rgba(255,255,255,.65)}
  html.tablette .panneau .bloc .tete button{flex:none;width:18px;height:18px;margin-top:3px;background:none;border:0;padding:0;cursor:pointer}
  html.tablette .panneau .bloc .tete button svg{display:block;width:100%;height:100%}
  html.tablette .panneau .bloc h3{margin:26px 0 0;font-family:var(--hn);font-weight:700;font-size:15px;line-height:1.2}
  html.tablette .panneau .bloc p{margin:26px 0 0;font-size:13px;line-height:1.38;white-space:pre-wrap}
  html.tablette body.conversation .clip,html.tablette body.menu-ouvert .clip{display:none}
  /* ---------- menu et conversation : empilés ---------- */
  html.tablette .menu{overflow:auto;padding-bottom:100px}
  html.tablette .menu .cadre{display:none}
  html.tablette .menu .colonne,html.tablette .menu .colonne.gauche,html.tablette .menu .colonne.droite{position:static;width:auto;height:auto;padding:0 20px;margin-top:24px}
  html.tablette .menu .colonne.gauche{margin-top:70px}
  html.tablette .menu .colonne > h4{font-size:12px}
  html.tablette .conv .cadre{left:0 !important;top:0 !important;width:100vw !important;height:100vh !important;transform:none !important}
  html.tablette .bascule-mobile{display:none}
  html.tablette .panneau:not(.article):not(.ouvert){height:64px}
  html.tablette .panneau .ligne .portrait{flex:none;width:64px;height:64px;margin-left:-26px;background:center / cover no-repeat}
  html.tablette .panneau .ligne .qui{flex:1;min-width:0;font-weight:700;font-size:13px;line-height:1.25}
  html.tablette .panneau .ligne .qui span{display:block;font-size:12px;font-weight:400}
  html.tablette .panneau:not(.article) .ligne{height:64px}
  /* en mobile, la barre ne porte ni l'article ni l'auteur (ils sont dans la bande orange) : son texte reste en place */
  html.tablette body.barre-pilotee.mode-actu .barre input,html.tablette body.barre-pilotee.mode-actu .barre .ico,html.tablette body.barre-pilotee.mode-cit .barre input,html.tablette body.barre-pilotee.mode-cit .barre .ico{transform:none !important;opacity:1 !important}
  html.tablette body.barre-pilotee.mode-actu .roll,html.tablette body.barre-pilotee.mode-cit .roll{transform:none !important;opacity:.4 !important}
  html.tablette body.mode-cit #barre .auteur-b,html.tablette body.mode-actu #barre-article{display:none !important}
  html.tablette .clip{left:calc(41px - 20px * var(--k));right:auto;bottom:auto;width:calc(100vw - 82px + 40px * var(--k));height:calc(100vh - 107px + 22px * var(--k))}   /* calée sur la barre (ses deux formes), même si la page déborde en largeur */
  /* le menu s'ouvre sans rien déplacer : le carré orange de l'étoile garde sa taille (une règle d'ordinateur le rapetissait) */
  html.tablette body.menu-ouvert #barre.barre .envoi,html.tablette body.conversation #barre.barre .envoi{width:calc(66px - 2px * var(--k)) !important;height:100% !important}
  /* le bloc du burger : fond gris très clair dès le premier défilement, et ensuite partout */
  html.tablette body.deja-defile .barre .burger-b{background:#f8f8f8}
  /* le logo Orange conforme : la barre blanche aux proportions du logo (calée en --u, elle se décalait quand le logo passe à 25 px) */
  html.tablette .logo::after{left:14.7%;bottom:14.77%;width:70.58%;height:14.71%}
  /* le menu : une catégorie ouvre ses sous-liens en plein écran, sur sa photo, avec un retour */
  html.tablette body.menu-categorie .menu .cadre{display:block !important;position:fixed !important;left:0 !important;top:0 !important;right:auto !important;width:100vw !important;height:100vh !important;margin:0 !important;transform:none !important;z-index:6;overflow:auto;background:#000}
  html.tablette body.menu-categorie .menu .cadre > img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover}
  html.tablette body.menu-categorie .menu .cadre .voile{position:absolute !important;inset:0 !important;opacity:1 !important;background:rgba(0,0,0,.62) !important}
  html.tablette body.menu-categorie .menu .cadre .sous{position:relative !important;inset:auto !important;width:auto !important;height:auto !important;padding:112px 24px 130px !important;transform:none !important;opacity:1 !important;color:#fff}
  html.tablette body.menu-categorie .menu .cadre .sous .liste{position:static !important;width:auto !important;transform:none !important;opacity:1 !important}
  html.tablette body.menu-categorie .menu .cadre .sous .ligne a,html.tablette body.menu-categorie .menu .cadre .sous .grp-titre{font-size:17px !important;line-height:1.35}
  html.tablette body.menu-categorie .menu .cadre .sous .ligne a,html.tablette body.menu-categorie .menu .cadre .sous .grp-titre,html.tablette body.menu-categorie .menu .cadre .sous .grp-liste a:not(.bouton-menu){color:#fff !important}   /* lisibles sur la photo ; le + reste orange */
  html.tablette body.menu-ouvert.menu-categorie #barre.barre{opacity:1 !important;pointer-events:auto !important}   /* la barre reste là, comme dans le reste du menu */
  html.tablette body.menu-categorie .menu .retour-m{display:flex;position:fixed;z-index:7;left:20px;top:58px;align-items:center;gap:10px;background:none;border:0;padding:0;color:#fff;font-weight:700;font-size:14px;cursor:pointer}
  html.tablette body.menu-categorie .menu .retour-m svg{width:16px;height:16px}
  /* tablette : ce que la page d'ordinateur règle autrement dans la barre (accueil, index.html) reprend la forme du mobile */
  html.tablette #barre.barre .envoi{margin:0}
  html.tablette #barre.barre .envoi > svg.etoile{width:19px;height:19px;margin:0}
  html.tablette #barre.barre .roll, html.tablette #barre.barre input{font-size:15px}
  html.tablette #barre.barre .player{padding-left:0}
  html.tablette #barre.barre .savoir{font-size:13px}
  html.tablette #groupe, html.tablette #accueil{overflow-x:clip}        /* les cartes d'actualité hors écran ne font pas glisser la page de côté au doigt (clip garde l'effet collé des récits) */
  /* tablette : la barre du bas ne prend pas toute la largeur de l'iPad : 600 px au plus, centrée (un peu plus large que sur un téléphone) */
  html.tablette body, html.tablette body :is(#barre, .clip){--lb:min(calc(100vw - 82px + 40px * var(--k)), 600px)}
  html.tablette #barre.barre{left:calc(50% - var(--lb) / 2) !important;width:var(--lb) !important}
  html.tablette .clip{left:calc(50% - var(--lb) / 2);width:var(--lb)}
  /* tablette, accueil : sur le premier écran la barre est la barre blanche du logo, DANS le carré (à la place de la barre d'ordinateur) ;
     elle descend en bas à sa forme mobile standard quand la phrase arrive (--k suit --pb), comme sur ordinateur ; la bande orange reste calée sur elle */
  html.tablette body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert), html.tablette body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert) :is(#barre, .clip){--lb:calc(var(--bw) * (1 - var(--k)) + min(calc(100vw - 42px), 600px) * var(--k))}
  html.tablette body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert) #barre.barre{top:calc(var(--bar-top) * (1 - var(--k)) + (100vh - 85px) * var(--k)) !important;height:calc(var(--bh) * (1 - var(--k)) + 64px * var(--k)) !important}
  html.tablette body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert) #barre.barre .envoi{width:calc(var(--bh) * (1 - var(--k)) + 64px * var(--k)) !important}
  html.tablette body[data-page="accueil"]:not(.barre-basse):not(.conversation):not(.menu-ouvert) .clip{height:calc(var(--bar-top) * (1 - var(--k)) + (100vh - 85px) * var(--k))}
  html.tablette .carre .titre-video-hero{padding-bottom:calc(100vh - var(--bar-top) + 36 * var(--px) + 52px)}   /* la bande orange (52 px) sort au-dessus de la barre : la date, le titre et le décompte remontent d'autant */
  /* tablette : comme sur mobile, la barre ne porte pas l'article de l'actualité : il est écrit sur sa photo (catégorie, thème, date, titre), avec un dégradé pour le lire */
  html.tablette .carte-actu:not(.carte-agenda)::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.05) 50%);pointer-events:none}
  html.tablette .carte-actu .infos{display:block;position:absolute;z-index:2;left:40px;right:40px;top:40px;color:#fff;pointer-events:none}
  html.tablette .carte-actu .infos small{display:block;font-size:11px;font-weight:700;color:rgba(255,255,255,.85)}
  html.tablette .carte-actu .infos small b{color:var(--orange)}
  html.tablette .carte-actu .infos h3{margin:18px 0 0;font-family:var(--hn);font-weight:700;font-size:20px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  html.tablette .carte-actu .infos.m + .infos, html.tablette .carte-actu .infos + .infos.m{display:none}   /* une seule fois, si la page en a déjà une */
  html.tablette .pied-barre{height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden;visibility:hidden}   /* comme sur mobile : la barre fixe reste, le pied n'a pas la sienne */
  /* tablette debout : comme sur mobile, l'agenda à gauche de l'actualité n'a plus la place */
  @media (orientation: portrait){ html.tablette .carte-agenda{display:none} }

/* ============================================================
   05/11 (3) : l'accueil mobile d'après sa planche Figma « Mobile screen » (470 × 754).
   --pm = 1 px de la planche ; les titres se calent sur le haut de l'écran, les contenus sur le centre, la barre et les liens sur le bas.
   Défilement simple, sans aimant ; plus de bascule des récits : on passe de la citation au bloc, qui porte son propre titre.
   ============================================================ */
.titre-m, .points-exp, .phrase br.tel, .globe-m, .arret-video{display:none}   /* les titres et les lignes des blocs, en mobile seulement */
@media (min-width: 768px){ #expertises .g-pa .txt p{display:none} }   /* le texte des cartes d'expertise : en mobile seulement */
@media (max-width: 767px){
  /* un aimant léger sur chaque bloc : en défilant doucement, le bloc se cale sur l'écran ; en défilant fort, on passe (proximity) ;
     l'ouverture du cadre et l'arrivée de la citation sont des animations complètes (index.html, sceneTel) */
  html:has(body[data-page="accueil"]){scroll-snap-type:y proximity}
  body[data-page="accueil"] .hero-wrap, body[data-page="accueil"] .arret-video{scroll-snap-align:start}
  body[data-page="accueil"] .arret-video{display:block;position:absolute;left:0;width:1px;height:1px;pointer-events:none}
  body[data-page="accueil"] .recit-wrap, body[data-page="accueil"] #groupe.actus-hero, #accueil .w-monde, #accueil .page-cle, #accueil .w-chiffres.premier, #accueil #expertises.w-expertises, #accueil .w-pied{scroll-snap-align:start}
  body[data-page="accueil"] .bande-actus{touch-action:pan-y}   /* le geste horizontal est pour les cartes (index.html) */
  body[data-page="accueil"]{--pm:calc(100vw / 470);--sq:calc(424 * var(--pm));--sq-top:calc(50vh - 212 * var(--pm));--bar-top:calc(50vh + 117 * var(--pm));--bw:calc(334 * var(--pm));--bh:calc(54 * var(--pm));--hb:calc(54 * var(--pm) + 4 * var(--pm) * var(--k));--fpm:var(--fp, 0)}
  body[data-page="accueil"] :is(#barre, .clip){--hb:calc(54 * var(--pm) + 4 * var(--pm) * var(--k));--fpm:var(--fp, 0)}   /* recalculées là où --k et --fp sont posés */
  body[data-page="accueil"].menu-ouvert, body[data-page="accueil"].menu-ouvert :is(#barre, .clip){--fpm:0}

  /* ---------- écran 0 : la ligne du haut (Client Orange ?, le cours, la langue) et celle des profils en bas, sans logo ;
     dès que le cadre s'ouvre, les lignes s'effacent et le logo arrive ---------- */
  body[data-page="accueil"] .nav .gauche{display:block;position:static;height:auto}
  body[data-page="accueil"] .nav .droite{display:flex;position:fixed;left:calc(23 * var(--pm));right:calc(23 * var(--pm));top:calc(100vh - 31 * var(--pm));height:auto;justify-content:space-between;align-items:center;gap:0}
  body[data-page="accueil"] .nav .ligne{font-weight:700;font-size:max(9px, calc(10 * var(--pm)));line-height:1.2;color:#fff}
  body[data-page="accueil"] .nav .gauche .ligne{position:fixed;left:calc(23 * var(--pm));top:calc(24 * var(--pm))}
  body[data-page="accueil"] .nav .gauche .cours-ora{left:calc(184 * var(--pm))}
  body[data-page="accueil"] .nav .droite .langue{position:fixed;left:auto;right:calc(23 * var(--pm));top:calc(24 * var(--pm))}
  body[data-page="accueil"]:not(.m-ferme) .nav .ligne{opacity:0 !important;pointer-events:none !important}
  body[data-page="accueil"] .logo{left:calc(18 * var(--pm));top:calc(17 * var(--pm));width:calc(30 * var(--pm));height:calc(30 * var(--pm));transition:opacity .4s}
  body[data-page="accueil"].m-ferme .logo{opacity:0;pointer-events:none}

  /* ---------- la barre : forme hero (334 × 54, dans le carré, à 117 px sous le centre) → forme standard (435 × 58, à 16 px du bas) ;
     sur la vidéo ouverte, elle se coupe en deux : « Ajouter à l'agenda » en orange, « En savoir plus » en gris, sans burger ---------- */
  body[data-page="accueil"]:not(.conversation) .barre{top:calc((50vh + 117 * var(--pm)) * (1 - var(--k)) + (100vh - 74 * var(--pm)) * var(--k)) !important;left:calc(68 * var(--pm) - 51 * var(--pm) * var(--k)) !important;width:calc(334 * var(--pm) + 101 * var(--pm) * var(--k)) !important;height:var(--hb) !important;background:#f0f0f0}
  body[data-page="accueil"].barre-blanche:not(.conversation) .barre{background:#fff}   /* sur les chiffres et la carte du monde : le champ blanc (planche) */
  body[data-page="accueil"]:not(.conversation) #barre.barre .envoi{display:flex;align-items:center;justify-content:flex-start;width:calc(var(--hb) + 150 * var(--pm) * var(--fpm)) !important;overflow:hidden}
  body[data-page="accueil"]:not(.conversation) #barre.barre .envoi .etoile{order:0;flex:none;width:calc(20 * var(--pm));height:calc(20 * var(--pm));margin:0 calc(16 * var(--pm)) 0 calc((var(--hb) - 20 * var(--pm)) / 2)}
  body[data-page="accueil"]:not(.conversation) #barre.barre .envoi::after{right:auto;width:var(--hb)}
  body[data-page="accueil"]:not(.conversation):not(.menu-ouvert) #barre.barre .envoi .resume{display:block;order:1;position:static;white-space:nowrap;font-weight:500;font-size:max(12px, calc(14 * var(--pm)));color:#f0f0f0;opacity:1;transform:none}
  body[data-page="accueil"]:not(.conversation) .barre .envoi .livre, body[data-page="accueil"]:not(.conversation) .barre .envoi .pts{display:none}
  body[data-page="accueil"]:not(.conversation) .barre .champ{padding-left:calc(4 * var(--pm) * (1 - var(--k)) + 19 * var(--pm) * var(--k))}
  body[data-page="accueil"]:not(.conversation) .barre input, body[data-page="accueil"]:not(.conversation) .roll{font-size:max(12px, calc(14 * var(--pm)))}
  body[data-page="accueil"]:not(.conversation) .barre .player{justify-content:center}
  body[data-page="accueil"]:not(.conversation) .barre .player .savoir{display:inline-flex;align-items:center;gap:calc(10 * var(--pm));font-family:var(--hn);font-weight:500;font-size:max(12px, calc(14 * var(--pm)));color:#000}
  body[data-page="accueil"]:not(.conversation) .barre .player .savoir svg{width:calc(11 * var(--pm));height:calc(11 * var(--pm));color:var(--orange)}
  body[data-page="accueil"]:not(.conversation) .barre .burger-b{aspect-ratio:auto;width:calc(var(--hb) * (1 - var(--fpm)));margin-right:0;overflow:hidden;background:#f0f0f0}
  body[data-page="accueil"].barre-blanche:not(.conversation) .barre .burger-b{background:#f7f7f7}
  body[data-page="accueil"]:not(.conversation) .barre .burger-b i{height:1.5px}
  /* la bande orange du résumé : calée sur la barre standard, 58 px */
  body[data-page="accueil"] .clip{left:calc(17 * var(--pm));width:calc(435 * var(--pm));height:calc(100vh - 74 * var(--pm))}
  body[data-page="accueil"] .panneau:not(.ouvert){height:calc(58 * var(--pm))}
  body[data-page="accueil"] .panneau .ligne{height:calc(58 * var(--pm));padding:0 calc(24 * var(--pm)) 0 calc(22 * var(--pm))}
  body[data-page="accueil"] .panneau .ligne .texte{font-size:max(12px, calc(14 * var(--pm)))}

  /* ---------- écran 0 et 1 : le carré (424 px, centré), puis la vidéo : la date à 312, le titre à 365, le décompte en texte à 450 ---------- */
  body[data-page="accueil"] .carre .titre-video-hero{--haut:0px;top:calc(50% - 12 * var(--pm));transform:translateX(-50%);width:100vw;white-space:nowrap}
  body[data-page="accueil"] .carre .titre-video-hero h2{font-family:var(--sf);font-weight:700;font-size:calc(28 * var(--pm));line-height:calc(25 * var(--pm))}
  body[data-page="accueil"] .carre .titre-video-hero .mot-v{white-space:nowrap}
  body[data-page="accueil"] .carre .titre-video-hero small{top:calc(-53 * var(--pm));bottom:auto;width:auto;font-weight:700;font-size:max(9px, calc(10 * var(--pm)));line-height:1.2;color:rgba(255,255,255,.8);opacity:1}
  /* le compte à rebours : le même que sur ordinateur (le compteur du site : quatre cases, de petits carrés orange entre les nombres), à l'échelle du téléphone (05/11) */
  body[data-page="accueil"] .carre .titre-video-hero .compte-ev{position:absolute;left:0;right:0;top:calc(85 * var(--pm));display:flex;justify-content:center;margin:0}
  body[data-page="accueil"] .carre .titre-video-hero .compte-ev span{min-width:calc(72 * var(--pm));padding:0 calc(14 * var(--pm))}
  body[data-page="accueil"] .carre .titre-video-hero .compte-ev span + span::before{left:calc(-3 * var(--pm));top:calc(15 * var(--pm));width:calc(6 * var(--pm));height:calc(6 * var(--pm));min-width:4px;min-height:4px}
  body[data-page="accueil"] .carre .titre-video-hero .compte-ev b{font-size:calc(36 * var(--pm))}
  body[data-page="accueil"] .carre .titre-video-hero .compte-ev i{margin-top:calc(7 * var(--pm));font-size:max(9px, calc(11 * var(--pm)))}

  /* ---------- les citations : un écran noir, la phrase (46 / 46) centrée sur 436 px, « Orange ▸ » seul sur la première ligne ; plus de bascule ---------- */
  body[data-page="accueil"] .recit-wrap{height:100vh}
  body[data-page="accueil"] .phrase{position:relative;display:block;padding:0;background:#000;color:#fff}
  body[data-page="accueil"] .phrase p{position:absolute;left:calc(17 * var(--pm));right:calc(17 * var(--pm));top:calc(50% - 129 * var(--pm));width:auto;margin:0;font-size:calc(46 * var(--pm));line-height:calc(46 * var(--pm))}
  body[data-page="accueil"] #recit-wrap-2 .phrase p{top:calc(50% - 141 * var(--pm));font-size:calc(46 * var(--pm))}
  body[data-page="accueil"] .phrase .tete{display:inline;white-space:normal;transform:none}
  body[data-page="accueil"] .phrase .tete + br, body[data-page="accueil"] .phrase .suite br{display:none}
  body[data-page="accueil"] .phrase .tete::after{content:" "}
  body[data-page="accueil"] .phrase .suite br.tel{display:inline}   /* les coupes de la planche */
  body[data-page="accueil"] .phrase .fin{display:inline}
  body[data-page="accueil"] .phrase .fin::before{content:"\A";white-space:pre}
  body[data-page="accueil"] .phrase .fin .en-chiffres{display:none}
  body[data-page="accueil"] .phrase .puce.fleche{width:calc(42 * var(--pm));height:calc(42 * var(--pm));top:calc(-4 * var(--pm));margin:0 0 0 calc(6 * var(--pm))}
  body[data-page="accueil"] .phrase .cta-recit{position:absolute;left:0;right:0;top:calc(100% - 136.4 * var(--pm));margin:0}
  body[data-page="accueil"] .phrase .cta-recit .w-lien{font-family:var(--sf);font-weight:500;font-size:max(12px, calc(14 * var(--pm)));color:#fff}
  #accueil .apres-recit, #accueil .apres-recit > *{margin-top:0;opacity:1;transform:none}

  /* ---------- les titres des blocs (21 px, centrés) ---------- */
  #accueil .titre-m{display:block;position:absolute;z-index:2;left:0;right:0;margin:0;text-align:center;font-family:var(--sf);font-weight:700;font-size:calc(21 * var(--pm));line-height:calc(24 * var(--pm));color:#000}

  /* ---------- Orange en chiffres : écran gris, le titre à 111, la grille 2 × 2 (filets orange de 136 px), le lien à 602 ---------- */
  #accueil .w-chiffres.premier{position:relative;height:100vh;min-height:0;display:block;padding:0 !important;background:#f0f0f0;color:#000}
  #accueil .w-chiffres.premier .titre-m{top:calc(111 * var(--pm));line-height:calc(36 * var(--pm))}
  #accueil .w-chiffres.premier .g-ch-grille{position:absolute;left:calc(44 * var(--pm));top:calc(50% - 148 * var(--pm));width:calc(382 * var(--pm));display:grid;grid-template-columns:1fr 1fr;column-gap:0;row-gap:calc(20 * var(--pm))}
  #accueil .w-chiffres.premier .g-ch{min-width:0;min-height:0;height:calc(136 * var(--pm));margin:0;padding:0 calc(10 * var(--pm)) 0 calc(22 * var(--pm));border-left:2px solid var(--orange);box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start}
  #accueil .w-chiffres.premier .g-ch b{margin-top:calc(18 * var(--pm));font-family:var(--sf);font-weight:700;font-size:calc(20 * var(--pm));line-height:calc(24 * var(--pm))}
  #accueil .w-chiffres.premier .g-ch span{margin-top:calc(13 * var(--pm));max-width:calc(140 * var(--pm));font-family:var(--sf);font-weight:700;font-size:max(10px, calc(12 * var(--pm)));line-height:calc(16 * var(--pm));color:rgba(0,0,0,.56)}
  #accueil .w-chiffres.premier .g-ch .g-verifier{gap:calc(8 * var(--pm));color:#000;margin-top:calc(10 * var(--pm));font-size:max(12px, calc(14 * var(--pm)));font-weight:600}
  #accueil .w-chiffres.premier .g-ch .g-verifier svg{width:calc(12 * var(--pm));height:calc(12 * var(--pm))}
  #accueil .w-chiffres.premier .w-lien.centre{position:absolute;left:0;right:0;top:calc(100% - 152 * var(--pm));margin:0;text-align:center;font-family:var(--sf);font-weight:600;font-size:max(11px, calc(12 * var(--pm)));color:#000}

  /* ---------- Présence internationale : écran noir, le titre à 116, la carte au centre, le lien à 603 ---------- */
  #accueil .w-monde{position:relative;height:100vh;padding:0 !important;display:block;background:#000;color:#fff}
  #accueil .w-monde .w-entete{position:absolute;left:0;right:0;top:calc(116 * var(--pm));margin:0;display:block;text-align:center}
  #accueil .w-monde .w-entete .w-h2{font-family:var(--sf);font-weight:700;font-size:calc(25 * var(--pm));line-height:calc(30 * var(--pm))}
  #accueil .w-monde .monde-grille{display:none}
  #accueil .w-monde .globe-m{display:block;position:absolute;left:calc(68 * var(--pm));top:calc(50% - 176 * var(--pm));width:calc(333 * var(--pm));height:calc(333 * var(--pm))}   /* le cercle de la planche : 333 px à 68, 201 */
  #accueil .w-monde .globe-m canvas{display:block;width:100%;height:100%}
  #accueil .w-monde .globe-m{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}   /* on l'attrape et on le fait tourner à gauche, à droite ; le geste vertical fait défiler la page */
  #accueil .w-monde .globe-m.tenu{cursor:grabbing}
  #accueil .w-monde .liens{position:absolute;left:0;right:0;top:calc(100% - 152 * var(--pm));margin:0;display:flex;justify-content:center}
  #accueil .w-monde .liens .w-lien{font-family:var(--sf);font-weight:600;font-size:max(11px, calc(12 * var(--pm)));color:#fff}

  /* ---------- L'actualité du Groupe : en-tête gris (titre à 100, « Agenda complet » à 148, les lignes à 220), la photo de 254 jusqu'en bas ---------- */
  body[data-page="accueil"] .actus-hero{background:#f0f0f0}
  body[data-page="accueil"] .titre-actu{top:calc(100 * var(--pm));height:calc(24 * var(--pm));font-family:var(--sf);font-size:calc(21 * var(--pm));line-height:calc(24 * var(--pm))}
  body[data-page="accueil"] .actus-hero .agenda-m{top:calc(148 * var(--pm));font-family:var(--sf);font-weight:600;font-size:max(11px, calc(12 * var(--pm)));line-height:calc(16 * var(--pm))}
  body[data-page="accueil"] .points-actus{left:calc(49 * var(--pm));top:calc(220 * var(--pm));width:calc(361 * var(--pm));transform:none;gap:calc(9 * var(--pm))}
  body[data-page="accueil"] .points-actus i{height:3px}
  body[data-page="accueil"] .bande-actus{top:calc(254 * var(--pm));height:calc(100vh - 254 * var(--pm))}
  body[data-page="accueil"] .carte-actu{height:calc(100vh - 254 * var(--pm))}
  body[data-page="accueil"] .carte-actu .infos{left:calc(42 * var(--pm));right:auto;width:calc(372 * var(--pm));top:calc(41 * var(--pm))}
  body[data-page="accueil"] .carte-actu .infos small{font-size:max(9px, calc(10 * var(--pm)));line-height:calc(12 * var(--pm))}
  body[data-page="accueil"] .carte-actu .infos h3{margin-top:calc(19 * var(--pm));font-family:var(--sf);font-size:calc(20 * var(--pm));line-height:calc(25 * var(--pm))}

  /* ---------- Trust the future, la Fondation : la photo sur tout l'écran (voile de 20 %), tout centré : le titre en haut, le texte et le bouton blanc au-dessus de la barre ---------- */
  #accueil .page-cle{height:100vh;min-height:0;display:block;padding:0}
  #accueil .page-cle .img::after{background:rgba(0,0,0,.2)}
  #accueil .page-cle .titre{position:absolute;left:calc(24 * var(--pm));right:calc(24 * var(--pm));top:calc(163 * var(--pm));width:auto;transform:none;text-align:center}
  #accueil .page-cle .titre:not(:has(.sur, .tags, .date)){top:calc(181 * var(--pm))}
  #accueil .page-cle .sur{margin:0 0 calc(16 * var(--pm));font-weight:700;font-size:max(9px, calc(10 * var(--pm)));line-height:calc(12 * var(--pm));opacity:1}
  #accueil .page-cle h2{font-family:var(--sf);font-weight:700;font-size:calc(28 * var(--pm));line-height:calc(28 * var(--pm))}
  #accueil .page-cle .texte{position:absolute;left:0;right:0;top:auto;bottom:calc(233 * var(--pm));width:calc(260 * var(--pm));margin:0 auto;transform:none;text-align:center}
  #accueil .page-cle p{font-family:var(--hn);font-weight:700;font-size:max(12px, calc(15 * var(--pm)));line-height:calc(18.8 * var(--pm))}
  #accueil .page-cle .bouton{position:absolute;left:0;right:0;top:calc(100% + 23 * var(--pm));width:max-content;margin:0 auto;padding:0 calc(12 * var(--pm));font-weight:500;font-size:max(12px, calc(14 * var(--pm)));line-height:calc(36 * var(--pm));white-space:nowrap}

  /* ---------- Orange et ses expertises : en-tête gris (titre sur deux lignes à 92, le lien à 174, les lignes à 220), une carte pleine largeur de 254 jusqu'en bas, au doigt ---------- */
  #accueil #expertises, #accueil #expertises.apres-recit{margin-top:0;position:relative;height:100vh;min-height:0;display:block;padding:0 !important;background:#f0f0f0;color:#000}
  #accueil #expertises .titre-m{top:calc(104 * var(--pm))}   /* sur une ligne (05/11), centrée là où étaient les deux lignes de la planche */
  #accueil #expertises .w-lien.centre{position:absolute;left:0;right:0;top:calc(174 * var(--pm));margin:0;text-align:center;font-family:var(--sf);font-weight:600;font-size:max(11px, calc(12 * var(--pm)));line-height:calc(16 * var(--pm));color:#000}
  #accueil #expertises .points-exp{display:flex;position:absolute;left:calc(49 * var(--pm));top:calc(220 * var(--pm));width:calc(361 * var(--pm));gap:calc(9 * var(--pm))}
  #accueil #expertises .points-exp i{flex:1;height:3px;background:#d4d4d4;transition:background-color .4s}
  #accueil #expertises .points-exp i.vue{background:var(--orange)}
  #accueil #expertises .g-rail{margin:0;position:absolute;left:0;right:0;top:calc(254 * var(--pm));bottom:0;gap:0;padding:0;scroll-padding-left:0}
  #accueil #expertises .g-rail::after{display:none}
  #accueil #expertises .g-pa{width:100vw;height:100%;aspect-ratio:auto;justify-content:flex-start;padding:calc(40 * var(--pm)) calc(56 * var(--pm)) 0 calc(42 * var(--pm))}
  #accueil #expertises .g-pa::before{background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.05) 55%)}
  #accueil #expertises .g-pa h3{margin:0;font-family:var(--sf);font-weight:700;font-size:calc(21 * var(--pm));line-height:calc(25 * var(--pm))}
  #accueil #expertises .g-pa p{margin:calc(13 * var(--pm)) 0 0;max-width:calc(372 * var(--pm));font-size:max(11px, calc(14 * var(--pm)));line-height:calc(18 * var(--pm))}
  #accueil #expertises .g-pa .fl{display:none}
}