/* ============================================================
   Orange.com « Inside the box » — styles communs à toutes les pages
   Unité : 1u = 1/1729 de la largeur (planche Figma « Frame 33 »)
   ============================================================ */
:root{
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1 10h17M10.5 2.5 18 10l-7.5 7.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E");   /* 05/11 : LA flèche du site (celle de FLECHE, blocs.js), dessinée : elle remplace le caractère « → » partout, en masque coloré par la couleur du texte */
  --u: calc(100vw / 1729);
  --px: min(calc(100vw / 1440), calc(100vh / 860));   /* 05/11 : 1 px de la maquette « Accueil Marge element » (1440 × 860), pour le pied de page et l'accueil */
  --orange:#ff6e00;
  --gris:#f0f0f0;
  --nav: calc(66 * var(--u));                       /* hauteur occupée par la nav (logo à 33u + 33u) */
  --sq: min(calc(869 * var(--u)), calc(100vh - 186 * var(--u))); /* côté du carré : 93u d'air mini en haut et en bas */
  --sq-top: calc((100vh - var(--sq)) / 2);          /* centré dans la page */
  --bw: calc(var(--sq) * 0.712);                    /* barre IA : largeur */
  --bh: calc(var(--sq) * 0.148);                    /* barre IA : hauteur */
  --bar-top: calc(var(--sq-top) + var(--sq) * 0.7054);
  --hn: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sf: -apple-system, "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", sans-serif;
}
@media (min-width: 768px) and (orientation: portrait){ :root{--px:min(calc(100vw / 1180), calc(100vh / 860))} }   /* 05/11 : iPad debout — l'échelle suit la largeur utile (la colonne de 1080 px de la maquette remplit l'écran) */
*{box-sizing:border-box;margin:0;padding:0}
.fleche-t{display:inline-block;width:.78em;height:.78em;background:currentColor;-webkit-mask:var(--fleche) center / contain no-repeat;mask:var(--fleche) center / contain no-repeat;vertical-align:-.06em;font-style:normal}   /* les flèches écrites dans le code (boutons, fil d'Ariane) */
html{scroll-behavior:auto}
/* 30/10 : passage d'une page à l'autre — la page arrive en fondu, et s'efface avant de partir (commun.js `vers`) */
@keyframes page-entre{from{opacity:0}}
body{animation:page-entre .55s ease-out}
body.sortie{opacity:0 !important;transition:opacity .28s ease-in;pointer-events:none}
@media (prefers-reduced-motion: reduce){ body{animation:none} body.sortie{transition:none} }
/* « j'entre dans le cadre » : l'image d'une carte grandit jusqu'à couvrir l'écran, puis s'efface sur la page ouverte (commun.js) */
.cadre-zoom{position:fixed;z-index:200;background:#000 center / cover no-repeat;pointer-events:none}
.cadre-zoom.arrivee{inset:0;transition:opacity .45s ease-out}
.cadre-zoom.case{z-index:200}   /* 05/11 : la copie nette de l'image, calée sur la case cliquée ; nommée `cadre`, elle glisse jusqu'à sa place dans la page suivante */
/* 05/11 : arrivée par une carte — les textes du hero montent en douceur, vite, l'un après l'autre, pendant que l'image se pose */
@keyframes texte-cadre{from{opacity:0;transform:translateY(18px)}}
body.entree-cadre :is(.g-hero .dedans, .v3-gauche) > *{animation:texte-cadre .6s cubic-bezier(.2,.7,.15,1) .18s both}
body.entree-cadre :is(.g-hero .dedans, .v3-gauche) > :nth-child(2){animation-delay:.25s}
body.entree-cadre :is(.g-hero .dedans, .v3-gauche) > :nth-child(3){animation-delay:.32s}
body.entree-cadre :is(.g-hero .dedans, .v3-gauche) > :nth-child(4){animation-delay:.39s}
body.entree-cadre :is(.g-hero .dedans, .v3-gauche) > :nth-child(n+5){animation-delay:.46s}
.cadre-zoom.arrivee.part{opacity:0}
.case-visee::before, .case-visee::after{opacity:0 !important;transition:opacity .35s}   /* 05/11 : en entrant dans la case, ses voiles et dégradés s'effacent : l'image seule remplit l'écran */
body{background:#000;color:#fff;font-family:var(--sf);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:900px}
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- Nav (fixe, d'après le wireframe : logo, Client Orange ?, cours ; à droite les profils, la langue, le burger) ---------- */
.nav{position:fixed;inset:0 auto auto 0;width:100%;z-index:50;pointer-events:none}
.nav > *{pointer-events:auto}
.nav .gauche,.nav .droite{position:absolute;top:calc(33 * var(--u));height:calc(33.17 * var(--u));display:flex;align-items:center;gap:calc(36 * var(--u))}
.nav .gauche{left:calc(99 * var(--u))}
.nav .droite{right:calc(99 * var(--u))}
.nav .ligne{font-weight:700;font-size:max(10px, calc(12 * var(--u)));line-height:1.2;white-space:nowrap;transition:opacity .4s, transform .4s cubic-bezier(.2,.7,.15,1), color .2s}
.nav a.ligne:hover{color:var(--orange)}
.nav .discret{opacity:.45}
.nav .o{color:var(--orange)}
.nav a.actif{color:var(--orange)}
.nav .langue i{display:inline-block;width:1px;height:.9em;background:currentColor;margin:0 .5em;vertical-align:-.1em;opacity:.5}
/* Mode Confort+ : interrupteur en haut de la colonne de droite du menu */
.menu .confort{display:flex;align-items:center;gap:calc(18 * var(--u));font-weight:700;font-size:max(12px, calc(19 * var(--u)));margin-bottom:calc(40 * var(--u))}   /* en haut de sa colonne, à peine plus grand (29/10) */
.menu .confort b{color:var(--orange);font-weight:700}
.menu .confort small{font-size:inherit;font-weight:700;opacity:.5}
.menu .inter{width:calc(44 * var(--u));height:calc(23 * var(--u));box-sizing:border-box;border:1px solid #8c8c8c;background:transparent;position:relative;cursor:pointer;padding:0;transition:border-color .25s}   /* discret : gris, à peine plus haut que le texte ; orange une fois activé */
.menu .inter::after{content:"";position:absolute;left:calc(2 * var(--u));top:calc(2 * var(--u));width:calc(17 * var(--u));height:calc(17 * var(--u));background:#8c8c8c;transition:transform .25s cubic-bezier(.2,.7,.15,1), background .25s}
.menu .inter[aria-checked="true"]{border-color:var(--orange)}
.menu .inter[aria-checked="true"]::after{background:var(--orange);transform:translateX(calc(21 * var(--u)))}
.logo{position:absolute;left:calc(33 * var(--u));top:calc(33 * var(--u));width:calc(33.17 * var(--u));height:calc(33.17 * var(--u));background:var(--orange)}
.logo::after{content:"";position:absolute;left:calc(4.88 * var(--u));bottom:calc(4.9 * var(--u));width:calc(23.41 * var(--u));height:calc(4.88 * var(--u));background:#fff}
.burger{position:absolute;left:calc(1668 * var(--u));top:calc(38 * var(--u));width:calc(24 * var(--u));height:calc(24 * var(--u));background:transparent;transition:background .25s}   /* les trois traits prennent toute la taille du bloc */
.burger:hover{background:rgba(255,255,255,.08)}
.burger span{position:absolute;left:0;width:100%;height:max(1px, calc(1.6 * var(--u)));background:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, top .35s}
.burger span:nth-child(1){top:0} .burger span:nth-child(2){top:calc(50% - 1px)} .burger span:nth-child(3){top:calc(100% - max(1px, 1.6 * var(--u)))}
body.menu-ouvert .burger{background:transparent}
body.menu-ouvert .burger span:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}
body.menu-ouvert .burger span:nth-child(2){opacity:0}
body.menu-ouvert .burger span:nth-child(3){top:calc(50% - 1px);transform:rotate(-45deg)}

/* ---------- Bouton noir (celui des blocs de la planche) ---------- */
.btn{display:inline-block;margin-top:calc(22 * var(--u));background:#000;color:#fff;font-weight:700;font-size:max(9px, calc(12 * var(--u)));line-height:calc(32 * var(--u));padding:0 calc(11 * var(--u));white-space:nowrap;transition:background .2s,color .2s}
.btn:hover{background:var(--orange)}
.btn.blanc{background:#fff;color:#000}
.btn.blanc:hover{background:var(--orange);color:#fff}
.btn.contour{background:transparent;color:#000;box-shadow:inset 0 0 0 1px #000}
.btn.contour:hover{background:#000;color:#fff}
/* ---------- Hiérarchie des boutons, calquée sur OUDS Web (noms identiques, pour migrer sans renommer) — proposition du 30/10, voir boutons.html ----------
   btn-strong : action principale (noir ; blanc en mode sombre) · btn-default : action secondaire (contour) · btn-brand : l'action unique d'un écran (orange) ·
   btn-minimal : action tertiaire (texte seul) · link link-chevron : lien de navigation autonome · btn-assistant : action IA (le carré orange de la barre) */
.btn.btn-strong, .btn.btn-default, .btn.btn-brand, .btn.btn-minimal{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:calc(48 * var(--u));line-height:1.2;padding:0 calc(22 * var(--u));font-size:max(12px, calc(15 * var(--u)));text-decoration:none;cursor:pointer;border:0}
.btn.btn-strong{background:#000;color:#fff}
.btn.btn-strong:hover{background:#333;color:#fff}
.btn.btn-default{background:transparent;color:#000;box-shadow:inset 0 0 0 calc(2 * var(--u)) #000}
.btn.btn-default:hover{background:#000;color:#fff}
.btn.btn-brand{background:var(--orange);color:#000}
.btn.btn-brand:hover{background:#000;color:#fff}
.btn.btn-minimal{background:transparent;color:#000;padding:0 calc(8 * var(--u))}
.btn.btn-minimal:hover{background:rgba(0,0,0,.06)}
[data-bs-theme="dark"] .btn.btn-strong{background:#fff;color:#000}
[data-bs-theme="dark"] .btn.btn-strong:hover{background:#ddd;color:#000}
[data-bs-theme="dark"] .btn.btn-default{color:#fff;box-shadow:inset 0 0 0 calc(2 * var(--u)) #fff}
[data-bs-theme="dark"] .btn.btn-default:hover{background:#fff;color:#000}
[data-bs-theme="dark"] .btn.btn-minimal{color:#fff}
.link{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:max(12px, calc(14 * var(--u)));color:inherit;text-decoration:none}
.link.link-chevron::after{content:"";width:.45em;height:.45em;border-right:2px solid var(--orange);border-top:2px solid var(--orange);transform:rotate(45deg);transition:transform .25s cubic-bezier(.2,.7,.15,1)}
.link.link-chevron:hover::after{transform:translateX(.2em) rotate(45deg)}
.link:hover{text-decoration:underline;text-underline-offset:.2em}

/* ---------- Barre IA (fixe, suit tous les blocs) ---------- */
.barre{position:fixed;z-index:40;left:calc(50% - var(--bw) / 2);top:var(--bar-top);width:var(--bw);height:var(--bh);background:#fff;display:flex;align-items:center;padding:0 calc(var(--bw) * 0.089) 0 calc(var(--bw) * 0.095);gap:calc(var(--bw) * 0.045);box-shadow:0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.25)}
.barre .champ{position:relative;flex:1;height:100%;display:flex;align-items:center;min-width:0}
/* ---------- Mode article (section L'actualité du Groupe) : la barre devient la carte de l'article ; toutes les animations restent DANS la barre et dans le carré orange ---------- */
.barre{overflow:hidden}
.barre::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(5 * var(--u));background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.15,1)}
body.mode-actu .barre::before{transform:scaleX(1)}
.roll, .barre input{transition:transform .6s cubic-bezier(.2,.7,.15,1), opacity .35s}
body.mode-actu .roll, body.mode-actu .barre input{transform:translateY(-140%);opacity:0;pointer-events:none}
.barre .article{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + 140%));opacity:0;transition:transform .6s cubic-bezier(.2,.7,.15,1), opacity .35s;pointer-events:none}
body.mode-actu .barre .article{transform:translateY(-50%);opacity:1;transition-delay:.12s}
.barre .article small{display:block;font-size:max(9px, calc(var(--bh) * 0.1));font-weight:700;color:#8c8c8c;margin-bottom:.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre .article small b{color:var(--orange)}
.barre .article .titre{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--sf);font-weight:700;font-size:max(12px, calc(var(--bh) * 0.155));line-height:1.2;color:#000}
.barre .article.change{animation:article-change .5s cubic-bezier(.2,.7,.15,1)}
@keyframes article-change{from{transform:translateY(calc(-50% + 60%));opacity:0}to{transform:translateY(-50%);opacity:1}}
body.mode-actu .barre .ico{opacity:0;width:0;margin:0;transition:opacity .25s, width .5s cubic-bezier(.2,.7,.15,1)}
/* ---------- Mode lecteur (vidéo en plein écran) : la barre devient un player, le carré orange reste là pour « résumer l'événement » ---------- */
body.mode-video .roll, body.mode-video .barre input{transform:translateY(-140%);opacity:0;pointer-events:none}
.barre .player{position:absolute;left:0;right:0;top:50%;display:flex;align-items:center;gap:calc(var(--bw) * 0.03);transform:translateY(calc(-50% + 140%));opacity:0;transition:transform .6s cubic-bezier(.2,.7,.15,1), opacity .35s;pointer-events:none}
body.mode-video .barre .player{transform:translateY(-50%);opacity:1;pointer-events:auto;transition-delay:.12s}
.barre .savoir{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:max(12px, calc(var(--bh) * 0.14));color:#000;white-space:nowrap;text-decoration:none}
.barre .savoir svg{width:1.1em;height:1.1em;color:var(--orange);transition:transform .3s cubic-bezier(.2,.7,.15,1)}   /* 02/11 : la flèche de « En savoir plus » en orange */
.barre .savoir:hover svg{transform:translateX(.25em)}
.barre .envoi{overflow:hidden;transition:transform .6s cubic-bezier(.2,.7,.15,1), opacity .7s .2s cubic-bezier(.2,.7,.15,1)}
.barre .envoi > svg{grid-area:1 / 1;justify-self:start;margin-left:calc(var(--bh) * 0.1135);transition:transform .55s cubic-bezier(.2,.7,.15,1)}   /* l'icône se décale vers la gauche quand le carré s'étire, le texte vient à sa droite */
.barre .envoi .livre{display:none}   /* 30/10 : plus de livre ; sur l'actualité l'étoile IA reste, avec l'action « Résumé » écrite à côté */
.barre input{position:absolute;inset:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:#000;font-family:var(--sf);font-size:calc(var(--bh) * 0.125);padding:0}
.roll{position:relative;height:1.3em;line-height:1.3em;width:100%;overflow:hidden;font-size:calc(var(--bh) * 0.125);color:#000;opacity:.4;pointer-events:none;white-space:nowrap}
.roll span{position:absolute;left:0;top:0}
.roll span::after{content:"";display:inline-block;width:1px;height:1em;background:currentColor;margin-left:2px;vertical-align:-.12em;animation:curseur-roll 1s steps(2) infinite}
@keyframes curseur-roll{to{opacity:0}}
.roll span.sort{animation:roll-sort .5s cubic-bezier(.4,0,.6,1) forwards}
.roll span.entre{animation:roll-entre .55s cubic-bezier(.2,.7,.15,1) forwards}
@keyframes roll-sort{from{transform:translateY(0);opacity:1}to{transform:translateY(-120%);opacity:0}}
@keyframes roll-entre{from{transform:translateY(120%);opacity:0}to{transform:translateY(0);opacity:1}}
.barre.saisie .roll{opacity:0}
.barre .ico{flex:none;width:calc(var(--bh) * 0.15);height:calc(var(--bh) * 0.15);color:#8c8c8c;opacity:1}   /* gris, noir au survol, sans bouger */
.barre .ico:hover{color:#000}
.barre .ico svg{width:100%;height:100%;display:block}
.barre .ico svg path{stroke:currentColor;transition:stroke .2s}
.barre .ico.trombone{transform:rotate(135deg)}
.barre .envoi{position:relative;flex:none;width:calc(var(--bh) * 0.405);height:calc(var(--bh) * 0.405);background:var(--orange);display:grid;place-items:center;margin-left:calc(var(--bw) * 0.01)}
/* à l'arrivée sur le site : barre vide comme la barre blanche du logo, nav invisible ; tout apparaît ensemble après 2 s ou au premier scroll */
.barre > *{transition:opacity .7s cubic-bezier(.2,.7,.15,1)}
.barre .ico{transition:opacity .7s .1s cubic-bezier(.2,.7,.15,1)}
.barre .envoi{transition:opacity .7s .2s cubic-bezier(.2,.7,.15,1)}
.barre.vide > *, .barre.vide > .ico, .barre.vide > .envoi{opacity:0 !important;transition-delay:0s}
.nav > *{transition:opacity .7s cubic-bezier(.2,.7,.15,1), background .25s}
.nav.vide > *{opacity:0 !important}
.nav > *{transition:opacity .55s}   /* la nav apparaît en fondu avec le cadre et la barre (01/11) */
.barre .envoi svg{width:calc(var(--bh) * 0.178);height:calc(var(--bh) * 0.178);transition:transform .25s cubic-bezier(.2,.7,.15,1)}
.barre .envoi:hover .etoile{transform:scale(1.18) rotate(15deg)}   /* l'étoile IA respire au survol, le bouton ne bouge pas */
/* chargement très court à l'envoi : trois points qui pulsent dans le bouton */
.barre .envoi .pts{position:absolute;display:none}
.barre.charge .envoi svg{opacity:0}
.barre.charge .envoi .pts{display:inline-flex}
.pts.blanc i{background:#fff}

/* essai : passé le bloc de la phrase, la barre descend discrètement vers le bas de l'écran ; elle remonte dans le carré pour le menu et la conversation */
body.barre-basse .barre{top:calc(100vh - var(--bh) * 0.62 - 40 * var(--u));height:calc(var(--bh) * 0.62);padding:0 calc(var(--bw) * 0.03) 0 calc(var(--bw) * 0.06)}   /* posée en bas : plus fine, moins de marges autour, une nav plus classique ; le contenu garde sa taille */
.barre{transition:top .9s cubic-bezier(.2,.7,.15,1), height .9s cubic-bezier(.2,.7,.15,1), padding .9s cubic-bezier(.2,.7,.15,1), left .9s cubic-bezier(.2,.7,.15,1), width .9s cubic-bezier(.2,.7,.15,1), transform .6s cubic-bezier(.2,.7,.15,1), translate .7s cubic-bezier(.2,.7,.15,1), opacity .4s}
body.pied-vu:not(.menu-ouvert):not(.conversation) .barre{opacity:0 !important;pointer-events:none}   /* la barre fixe s'efface en fondu juste avant l'arrivée du pied, qui a sa grande barre (commun.js, 01/11) */
/* pendant l'ouverture du cadre (et la plongée), la barre SUIT le défilement : --pb va de 0 (barre d'accueil) à 1 (barre basse du lecteur), sans transition à part */
body.barre-suivie:not(.conversation):not(.menu-ouvert) .barre{transition-property:transform, opacity, translate;top:calc(var(--bar-top) * (1 - var(--pb)) + (100vh - var(--bh) * 0.62 - 40 * var(--u) - 60 * var(--u) * var(--rb, 0)) * var(--pb));height:calc(var(--bh) * (1 - 0.38 * var(--pb)));padding:0 calc(var(--bw) * (0.089 - 0.059 * var(--pb))) 0 calc(var(--bw) * (0.095 - 0.035 * var(--pb)))}
/* ---------- Rouleau piloté par le défilement : --r = 0 texte IA, 1 lecteur, 2 carte d'article, 3 texte revenu par le bas.
   --rt = position du texte (−1 en bas … 0 en place … 1 sorti par le haut), --fp = lecteur visible (0‥1), --ka = carte d'article visible (0‥1). Tout suit le scroll, rien ne se chevauche ---------- */
body.barre-pilotee .roll, body.barre-pilotee .barre input{transition:none;transform:translateY(calc(-140% * var(--rt, 0)));opacity:calc(1 - max(var(--rt, 0), -1 * var(--rt, 0)))}
body.barre-pilotee .roll{opacity:calc(.4 * (1 - max(var(--rt, 0), -1 * var(--rt, 0))))}
body.barre-pilotee .barre .player{transition:none;transform:translateY(calc(-50% + 140% * var(--sp, 1)));opacity:var(--fp, 0)}
body.barre-pilotee .barre .article{transition:none;transform:translateY(calc(-50% + 140% * var(--ap, 1)));opacity:var(--ka, 0)}
.barre .monde-nav{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;transform:translateY(calc(140% * var(--sm, 1)));opacity:var(--fm, 0);pointer-events:none}   /* sur Présence internationale : « Explorer la carte » dans la barre, à la place du texte IA */
body.mode-monde .barre .monde-nav{pointer-events:auto}
.barre .monde-nav .savoir{font-size:max(11px, calc(var(--bh) * 0.115))}   /* comme « En savoir plus », adapté à la barre basse plus petite */
body.barre-pilotee .barre::before{transition:none;transform:scaleX(var(--ka, 0))}
body.barre-pilotee .barre .ico{transform:translateY(calc(-140% * var(--rt, 0)));opacity:calc(1 - max(var(--rt, 0), -1 * var(--rt, 0)));transition:width .5s cubic-bezier(.2,.7,.15,1)}   /* le micro sort par le haut avec le texte IA */
body.barre-pilotee .barre .envoi{transition:opacity .7s .2s cubic-bezier(.2,.7,.15,1);transform:none;width:calc(var(--bh) * 0.405 + var(--fp, 0) * (var(--lres, 150px) + var(--bh) * 0.09) + var(--ka, 0) * (var(--lresA, 60px) + var(--bh) * 0.09))}   /* en mode vidéo le carré s'étire vers la gauche, juste à la taille de son texte */
.barre .envoi .resume{position:absolute;left:calc(var(--bh) * 0.385);top:50%;transform:translateY(-50%);white-space:nowrap;color:#fff;font-weight:700;font-size:max(11px, calc(var(--bh) * 0.12));pointer-events:none}   /* « Résumé de l'événement », écrit au rythme de l'agrandissement du bloc */
/* en mode vidéo la barre ne bouge pas et reste blanche, « En savoir plus » en noir */
.barre .voile{position:absolute;inset:0;z-index:-1;background:#000;opacity:0;pointer-events:none}
body.barre-pilotee .barre .voile{opacity:0}   /* le fond noir est porté par la couleur de fond elle-même */

/* ---------- Menu ouvert (et conversation) : la barre IA est TOUJOURS celle de l'accueil, quel que soit l'état de la page ---------- */
body.menu-ouvert #barre{left:calc(50% - var(--bw) / 2);width:var(--bw);top:var(--bar-top);height:var(--bh);padding:0 calc(var(--bw) * 0.089) 0 calc(var(--bw) * 0.095);transform:none;opacity:1;pointer-events:auto;background:#fff;box-shadow:0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.25)}
body.menu-ouvert.menu-categorie #barre{opacity:0;pointer-events:none}   /* un onglet ouvert : la barre s'efface, le carré est à l'arborescence ; elle revient avec le carré orange */
body.menu-ouvert #barre .auteur-b{opacity:0 !important}
body.menu-ouvert #barre .voile, body.conversation #barre .voile{opacity:0}
body.menu-ouvert .roll, body.menu-ouvert #barre input, body.conversation .roll, body.conversation #barre input{transform:none;opacity:1;pointer-events:auto}
body.menu-ouvert .roll, body.conversation .roll{opacity:.4;pointer-events:none}
body.menu-ouvert #barre .player, body.menu-ouvert #barre .article, body.menu-ouvert #barre .monde-nav, body.conversation #barre .player, body.conversation #barre .article, body.conversation #barre .monde-nav{transform:translateY(calc(-50% + 140%));opacity:0;pointer-events:none}
body.menu-ouvert #barre::before, body.conversation #barre::before{transform:scaleX(0)}
body.menu-ouvert #barre .ico, body.conversation #barre .ico{opacity:1;width:calc(var(--bh) * 0.15);margin:0;transform:none}
body.menu-ouvert #barre .envoi, body.conversation #barre .envoi{transform:none;width:calc(var(--bh) * 0.405)}
body.menu-ouvert #barre .envoi .resume, body.conversation #barre .envoi .resume{opacity:0}
body.menu-ouvert #barre .envoi .etoile, body.conversation #barre .envoi .etoile{transform:none}
body.barre-basse .barre .envoi{width:calc(var(--bh) * 0.405);height:calc(var(--bh) * 0.405)}
body.menu-ouvert .barre, body.conversation .barre{top:var(--bar-top)}

/* ---------- Le cadre : même carré, même place, réutilisé par le menu et la conversation ---------- */
.cadre{position:absolute;left:50%;top:var(--sq-top);width:var(--sq);height:var(--sq);transform:translateX(-50%);overflow:hidden}

/* ---------- Mode conversation : carré blanc, site gris, tout en chat ---------- */
/* à l'ouverture : le blanc couvre tout l'écran puis DÉZOOME jusqu'au carré, le gris apparaît autour */
/* à la sortie : le carré blanc RE-ZOOME jusqu'à couvrir l'écran, puis tout s'efface sur le site */
.conv{position:fixed;inset:0;z-index:35;background:#e9e9e9;opacity:0;pointer-events:none;transition:opacity .32s .06s}
body.conversation .conv{opacity:1;pointer-events:auto;transition:opacity .2s}
.conv .cadre{background:#fff;color:#000;transform:translateX(-50%) scale(var(--S, 2.4));transition:transform .5s cubic-bezier(.4,0,.6,1)}
/* pleine page : le cadre grandit jusqu'aux bords de l'écran, la barre IA descend en bas, la recherche se lit en entier */
body.conversation.conv-pleine .conv .cadre{left:0;top:0;width:100%;height:100%;transform:none;transition:left .85s cubic-bezier(.2,.8,.2,1), top .85s cubic-bezier(.2,.8,.2,1), width .85s cubic-bezier(.2,.8,.2,1), height .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1)}
body.conversation .conv .cadre{transition:transform .95s cubic-bezier(.2,.8,.2,1), left .85s cubic-bezier(.2,.8,.2,1), top .85s cubic-bezier(.2,.8,.2,1), width .85s cubic-bezier(.2,.8,.2,1), height .85s cubic-bezier(.2,.8,.2,1)}
body.conv-pleine .barre{top:calc(100vh - var(--bh) - 56 * var(--u)) !important}
/* en plein écran : une page dédiée aux résultats, en colonne confortable ; la conversation reste dans le cadre */
body.conv-pleine .fil{bottom:calc(var(--bh) + 90 * var(--u));padding:calc(130 * var(--u)) calc(99 * var(--u)) calc(16 * var(--u))}
body.conv-pleine .resultats{width:100%;max-width:calc(1000 * var(--u));margin:0 auto;border-top:0;padding-top:0;animation:none}
body.conv-pleine .resultats h5{font-family:var(--hn);font-size:calc(40 * var(--u));text-transform:none;letter-spacing:0;color:#000;line-height:1.05;margin-bottom:calc(30 * var(--u))}
body.conv-pleine .resultats .filtres{margin-bottom:calc(30 * var(--u))}
body.conv-pleine .resultats .res{grid-template-columns:calc(220 * var(--u)) 1fr;gap:calc(30 * var(--u));padding:calc(24 * var(--u)) 0}
body.conv-pleine .resultats .res .vis{width:calc(220 * var(--u));height:calc(138 * var(--u))}
body.conv-pleine .resultats .res h6{font-size:max(14px, calc(20 * var(--u)))}
body.conv-pleine .conv .fermer{top:calc(84 * var(--u));right:calc(99 * var(--u))}                 /* sous la nav, plus de chevauchement */
.conv .reduire{position:absolute;z-index:2;right:calc(99 * var(--u) + 44 * var(--u));top:calc(84 * var(--u));font-weight:700;font-size:max(10px, calc(11 * var(--u)));line-height:calc(28 * var(--u));padding:0 calc(12 * var(--u));background:#000;color:#fff;opacity:0;pointer-events:none;transition:opacity .3s}
body.conv-pleine .conv .reduire{opacity:1;pointer-events:auto;transition:opacity .4s .6s}
.fil .tout-voir{align-self:flex-start;margin-top:calc(14 * var(--u));font-weight:700;font-size:max(10px, calc(12 * var(--u)));line-height:calc(34 * var(--u));padding:0 calc(14 * var(--u));background:#000;color:#fff;transition:background .2s}
.fil .tout-voir i{font-style:normal;margin-left:.5em;color:var(--orange)}
.fil .tout-voir:hover{background:var(--orange)}
.fil .tout-voir:hover i{color:#fff}
.conv .reduire:hover{background:var(--orange)}
body.conversation .conv .cadre{transform:translateX(-50%) scale(1);transition:transform .95s cubic-bezier(.2,.8,.2,1)}
.conv .fil,.conv .fermer{opacity:0;transition:opacity .2s}
body.conversation .conv .fil,body.conversation .conv .fermer{opacity:1;transition:opacity .5s .55s}
.conv .fermer{position:absolute;z-index:2;right:calc(18 * var(--u));top:calc(14 * var(--u));width:calc(28 * var(--u));height:calc(28 * var(--u));font-size:calc(22 * var(--u));line-height:1;color:rgba(0,0,0,.35);display:grid;place-items:center}
.conv .fermer:hover{color:#000}
.fil{position:absolute;left:0;right:0;top:0;bottom:calc(var(--bh) * 0.62 + 44 * var(--u));overflow:auto;padding:calc(48 * var(--u)) calc(56 * var(--u)) calc(16 * var(--u));display:flex;flex-direction:column;gap:calc(28 * var(--u));scroll-behavior:smooth}
/* en conversation, la barre devient une vraie barre de chat, fine, posée en bas du cadre */
body.conversation .barre{top:calc(var(--sq-top) + var(--sq) - var(--bh) * 0.62 - 22 * var(--u));height:calc(var(--bh) * 0.62);left:calc(50% - var(--sq) / 2 + 22 * var(--u));width:calc(var(--sq) - 44 * var(--u));padding:0 calc(var(--bw) * 0.03) 0 calc(var(--bw) * 0.05)}   /* toute la largeur du cadre, même marge en bas, à gauche et à droite */
.msg.ia p{margin:0 0 .7em}
.msg.ia p:last-of-type{margin-bottom:0}
.msg.ia .saut{display:block;height:.7em}
.fil .intro{color:rgba(0,0,0,.35);font-size:max(10px, calc(12 * var(--u)));font-weight:700;margin-bottom:calc(4 * var(--u))}
.msg{font-size:max(12px, calc(15 * var(--u)));line-height:1.55;animation:msg .35s cubic-bezier(.2,.7,.15,1)}
@keyframes msg{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg.moi{align-self:flex-end;max-width:70%;background:#f0f0f0;color:#000;font-weight:700;padding:calc(10 * var(--u)) calc(14 * var(--u))}
/* la réponse : un en-tête discret, puis le texte sur toute la largeur */
.msg.ia{align-self:stretch;position:relative}
.msg.ia .qui{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:max(9px, calc(11 * var(--u)));font-weight:700;margin-bottom:calc(12 * var(--u))}
.msg.ia .qui i{position:relative;width:calc(14 * var(--u));height:calc(14 * var(--u));background:var(--orange)}
.msg.ia .qui i::after{content:"";position:absolute;left:calc(2 * var(--u));bottom:calc(2 * var(--u));width:calc(10 * var(--u));height:calc(2 * var(--u));background:#fff}
.msg.ia .qui span{color:rgba(0,0,0,.4);font-weight:700}
.msg.ia .qui .ia-plus{margin-left:auto;color:#000;font-weight:700;white-space:nowrap}   /* « En savoir plus sur l'IA du site », à côté de la mention (30/10) */
.msg.ia .qui .ia-plus::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);margin-left:.4em}
.msg.ia .qui .ia-plus:hover{color:var(--orange)}
.msg.ia .texte{font-size:max(13px, calc(16 * var(--u)))}
.msg.ia .curseur{display:inline-block;width:.5em;height:1em;background:var(--orange);vertical-align:-.15em;margin-left:2px;animation:pt 1s infinite}
.msg .cite{display:inline-grid;place-items:center;width:1.15em;height:1.15em;margin-left:.3em;background:var(--orange);color:#fff;font-style:normal;font-weight:700;font-size:.62em;vertical-align:.15em;cursor:pointer}
/* chiffres clés sortis de la réponse */
.msg .chiffres{display:grid;grid-template-columns:repeat(3, 1fr);gap:calc(10 * var(--u));margin-top:calc(18 * var(--u))}
.msg .chiffres div{border-left:calc(3 * var(--u)) solid var(--orange);padding:calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(12 * var(--u))}
.msg .chiffres b{display:block;font-family:var(--hn);font-size:calc(30 * var(--u));line-height:1;margin-bottom:calc(5 * var(--u))}
.msg .chiffres span{display:block;font-size:max(9px, calc(10.5 * var(--u)));font-weight:700;color:rgba(0,0,0,.5);line-height:1.3}
.msg .sous-titre{font-size:max(8px, calc(10 * var(--u)));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.4);margin:calc(24 * var(--u)) 0 calc(6 * var(--u))}
/* sources : une liste aérée, numéro orange, titre, fil */
.msg .sources{display:flex;flex-direction:column}
.msg .source{display:grid;grid-template-columns:calc(20 * var(--u)) 1fr;gap:calc(12 * var(--u));align-items:start;padding:calc(10 * var(--u)) 0;border-top:1px solid rgba(0,0,0,.08);font-size:max(10px, calc(12 * var(--u)));line-height:1.35;cursor:pointer}
.msg .source:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.msg .source b{display:block;transition:color .2s}
.msg .source b i{position:absolute;left:0;top:calc(11 * var(--u));display:grid;place-items:center;width:calc(20 * var(--u));height:calc(20 * var(--u));background:var(--orange);color:#fff;font-style:normal;font-size:max(8px, calc(10 * var(--u)))}
.msg .source{position:relative;padding-left:calc(32 * var(--u));grid-template-columns:1fr}
.msg .source:hover b{color:var(--orange)}
.msg .source span{display:block;color:rgba(0,0,0,.45);font-weight:700;font-size:max(8px, calc(10 * var(--u)));margin-top:calc(2 * var(--u))}
/* aller directement à : boutons noirs ; questions associées : pastilles claires */
.msg .liens{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u))}
.msg .liens a{display:inline-flex;align-items:center;gap:.5em;background:#000;color:#fff;font-weight:700;font-size:max(10px, calc(12 * var(--u)));padding:calc(9 * var(--u)) calc(12 * var(--u));transition:background .2s}
.msg .liens a:hover{background:var(--orange)}
.msg .liens a::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)}
.msg .liens a:hover::after{color:#fff}
.msg .assoc{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u))}
.msg .assoc button{background:#f4f4f4;padding:calc(8 * var(--u)) calc(12 * var(--u));font-size:max(9px, calc(11 * var(--u)));font-weight:700;text-align:left;transition:background .2s,color .2s}
.msg .assoc button:hover{background:#000;color:#fff}
/* tous les résultats : un lien texte ; mention IA : une note de bas de réponse */
.fil .tout-voir{align-self:flex-start;margin:calc(4 * var(--u)) 0 0;font-weight:700;font-size:max(10px, calc(12 * var(--u)));color:#000;background:none;padding:0;border-bottom:1px solid #000;line-height:1.6;transition:color .2s, border-color .2s}
.fil .tout-voir i{font-style:normal;margin-left:.4em;color:var(--orange);display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.15,1)}
.fil .tout-voir:hover{color:var(--orange);border-color:var(--orange);background:none}
.fil .tout-voir:hover i{transform:translateX(3px)}
.msg .mention{display:block;font-size:max(8px, calc(9.5 * var(--u)));font-weight:700;color:rgba(0,0,0,.35);margin-top:calc(18 * var(--u));padding-top:calc(10 * var(--u));border-top:1px solid rgba(0,0,0,.08)}
.resultats .filtres{margin-bottom:calc(30 * var(--u))}
body.conv-pleine .resultats .res{grid-template-columns:calc(220 * var(--u)) 1fr;gap:calc(30 * var(--u));padding:calc(24 * var(--u)) 0}
body.conv-pleine .resultats .res .vis{width:calc(220 * var(--u));height:calc(138 * var(--u))}
body.conv-pleine .resultats .res h6{font-size:max(14px, calc(20 * var(--u)))}
body.conv-pleine .conv .fermer{top:calc(84 * var(--u));right:calc(99 * var(--u))}                 /* sous la nav, plus de chevauchement */
.conv .reduire{position:absolute;z-index:2;right:calc(99 * var(--u) + 44 * var(--u));top:calc(84 * var(--u));font-weight:700;font-size:max(10px, calc(11 * var(--u)));line-height:calc(28 * var(--u));padding:0 calc(12 * var(--u));background:#000;color:#fff;opacity:0;pointer-events:none;transition:opacity .3s}
body.conv-pleine .conv .reduire{opacity:1;pointer-events:auto;transition:opacity .4s .6s}
.conv .reduire:hover{background:var(--orange)}
body.conversation .conv .cadre{transform:translateX(-50%) scale(1);transition:transform .95s cubic-bezier(.2,.8,.2,1)}
.conv .fil,.conv .fermer{opacity:0;transition:opacity .2s}
body.conversation .conv .fil,body.conversation .conv .fermer{opacity:1;transition:opacity .5s .55s}
.conv .fermer{position:absolute;z-index:2;right:calc(18 * var(--u));top:calc(14 * var(--u));width:calc(28 * var(--u));height:calc(28 * var(--u));font-size:calc(22 * var(--u));line-height:1;color:rgba(0,0,0,.35);display:grid;place-items:center}
.conv .fermer:hover{color:#000}
.resultats .filtres{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u));margin-bottom:calc(14 * var(--u))}
.resultats .filtres button{font-weight:700;font-size:max(8px, calc(10 * var(--u)));line-height:calc(28 * var(--u));padding:0 calc(12 * var(--u));border:1px solid rgba(0,0,0,.25);transition:background .2s,color .2s}
.resultats .filtres button.actif{background:#000;color:#fff;border-color:#000}
.resultats .filtres .tri{margin-left:auto;font-size:max(8px, calc(10 * var(--u)));font-weight:700;color:rgba(0,0,0,.5);align-self:center}
.resultats .filtres .tri::after{content:" ⌄"}
.res .fil{font-size:max(8px, calc(9 * var(--u)));font-weight:700;color:rgba(0,0,0,.4);margin-bottom:calc(3 * var(--u))}
.res .extrait{font-size:max(10px, calc(12 * var(--u)));line-height:1.4;color:rgba(0,0,0,.7);margin-top:calc(5 * var(--u))}
.res .type{display:inline-block;background:#000;color:#fff;padding:calc(2 * var(--u)) calc(7 * var(--u));margin-right:calc(8 * var(--u))}
.res:hover h6{color:var(--orange)}
.res.cache{display:none}
.resultats .pagination{display:flex;justify-content:center;gap:calc(20 * var(--u));padding:calc(18 * var(--u)) 0 calc(6 * var(--u));font-weight:700;font-size:max(9px, calc(11 * var(--u)))}
.resultats .pagination button{color:rgba(0,0,0,.45)}
.resultats .pagination button.actif{color:var(--orange)}
.resultats .pagination button:hover{color:#000}
.pts{display:inline-flex;gap:4px;vertical-align:middle}
.pts i{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:pt 1s infinite}
.pts i:nth-child(2){animation-delay:.15s}.pts i:nth-child(3){animation-delay:.3s}
@keyframes pt{0%,80%,100%{opacity:.25}40%{opacity:1}}
/* résultats classiques sous la recommandation */
.resultats{align-self:stretch;margin-top:calc(6 * var(--u));border-top:1px solid rgba(0,0,0,.1);padding-top:calc(18 * var(--u));animation:msg .4s cubic-bezier(.2,.7,.15,1) both}
.resultats h5{font-size:max(9px, calc(10 * var(--u)));font-weight:700;color:rgba(0,0,0,.4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:calc(14 * var(--u))}
.res{display:grid;grid-template-columns:calc(120 * var(--u)) 1fr;gap:calc(18 * var(--u));align-items:start;padding:calc(14 * var(--u)) 0;border-bottom:1px solid rgba(0,0,0,.08);cursor:pointer;transition:background .2s}
.res:hover{background:#fafafa}
.res .vis{width:calc(120 * var(--u));height:calc(76 * var(--u));background:#ddd center/cover no-repeat}
.res .cat{font-size:max(8px, calc(10 * var(--u)));font-weight:700;color:rgba(0,0,0,.5);margin-bottom:calc(4 * var(--u))}
.res .cat b{color:var(--orange)}
.res h6{font-size:max(11px, calc(14 * var(--u)));font-weight:700;line-height:1.3}
.res .date{font-size:max(8px, calc(10 * var(--u)));color:rgba(0,0,0,.4);margin-top:calc(6 * var(--u));font-weight:700}
body.conversation .barre{background:#f3f3f3;box-shadow:none}
body.conversation .nav{color:#000}
body.conversation .burger:hover{background:rgba(0,0,0,.06)}
body.conversation .burger span{background:#000}

/* ---------- Menu plein écran : Explorer Orange à gauche, le carré au milieu, Espaces par profil à droite ---------- */
.menu{position:fixed;inset:0;z-index:30;background:#000;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.75,0,.2,1);overflow:hidden}
body.menu-ouvert .menu{clip-path:inset(0 0 0 0)}
.menu ul{list-style:none}
.menu .colonne{position:absolute;top:var(--sq-top);height:var(--sq);display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .5s .3s}
body.menu-ouvert .menu .colonne{opacity:1}
.menu .colonne.gauche{left:calc(136 * var(--u));width:calc(300 * var(--u))}   /* Explorer Orange puis Votre profil, centrés sur la hauteur du carré ; 136u du bord (V2 du menu, 01/11) */
.menu .colonne.droite{left:calc(50% + var(--sq) / 2 + (100vw - 50% - var(--sq) / 2 - 245 * var(--u)) / 2);width:calc(245 * var(--u))}  /* Accès directs et Sites Orange : 240u, centrés entre le carré et le bord de l'écran */
.menu .colonne > h4.deuxieme{margin-top:calc(40 * var(--u))}
.menu .colonne > h4{font-size:max(12px, calc(19 * var(--u)));font-weight:700;color:var(--orange);margin-bottom:calc(22 * var(--u))}
.menu .cats li{font-family:var(--hn);font-weight:700;font-size:calc(33 * var(--u));line-height:calc(42 * var(--u))}
.menu .cats.profils li{font-size:calc(25 * var(--u));line-height:calc(33 * var(--u))}
.menu .cats li small{display:block;font-family:var(--sf);font-size:max(8px, calc(10 * var(--u)));font-weight:700;line-height:1;opacity:.45;margin-top:calc(-2 * var(--u))}
.menu .cats a{display:block;position:relative;color:rgba(255,255,255,.35);transition:color .25s, padding-left .25s cubic-bezier(.2,.7,.15,1)}   /* la barre orange ne décale que le titre survolé : les autres restent calés à gauche */
.menu .cats a::before{content:"";position:absolute;left:0;top:50%;width:calc(3 * var(--u));height:.8em;margin-top:-.4em;background:var(--orange);transform:scaleY(0);transition:transform .25s cubic-bezier(.2,.7,.15,1)}
.menu .cats li.actif a{color:#fff;padding-left:calc(24 * var(--u))}
.menu .cats li.actif a::before{transform:scaleY(1)}
.menu .cats li.bouton{margin:calc(44 * var(--u)) 0 calc(30 * var(--u))}
.menu .cats li.bouton a{display:inline-block;font-family:var(--sf);font-size:max(12px, calc(19 * var(--u)));line-height:calc(38 * var(--u));padding:0 calc(16 * var(--u)) !important;background:#000;color:#fff}
.menu .cats li.bouton a::before{display:none}
.menu .cats li.bouton.actif a{background:var(--orange)}
.menu .cadre{background:var(--orange);transform:translateX(-50%) scale(.9);opacity:0;transition:transform .7s cubic-bezier(.2,.7,.15,1) .15s, opacity .5s .15s, background-color .4s}   /* rien de choisi : le carré orange, la barre IA dedans (plus de vidéo, V2 du menu) */
body.menu-ouvert .menu .cadre{transform:translateX(-50%) scale(1);opacity:1}
.menu .cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .5s, transform 1.2s cubic-bezier(.2,.7,.15,1)}
.menu .cadre img.actif{opacity:1;transform:scale(1)}
/* un onglet ouvert : la photo d'en-tête de la page sous un gros voile noir, puis l'arborescence (nom de la rubrique et « Voir plus », pages, groupes en accordéon) */
.menu .cadre .voile{position:absolute;inset:0;background:rgba(0,0,0,.78);opacity:0;transition:opacity .5s;pointer-events:none}
.menu .cadre.categorie .voile{opacity:1}
.menu .sous{z-index:2}
.menu .cadre{color:#fff}
.menu .sous{position:absolute;left:14%;width:72%;top:calc(var(--sq) * 0.2);bottom:calc(var(--sq) * 0.08);overflow:auto;scrollbar-width:none;opacity:0;transition:opacity .5s .3s;display:flex;flex-direction:column}   /* les marges du mock : 14 % de chaque côté, le titre à 20 % du haut */
.menu .sous .liste{margin-top:0}   /* l'arborescence part du haut du carré (la barre IA n'y est plus quand un onglet est ouvert) */
.menu .cadre.categorie{background:#000}                                                       /* au clic sur un onglet : noir sous la photo */
.menu .cadre.neutre img{opacity:0 !important}
.menu .sous::-webkit-scrollbar{display:none}
body.menu-ouvert .menu .sous{opacity:1}
/* le mock du 01/11 : nom de la rubrique en orange 31u et « Voir plus → » à droite ; pages en blanc 23u avec une flèche à droite ;
   groupes en orange 23u séparés de filets, « + » à droite ; les pages d'un groupe ouvert en blanc 17u */
/* 02/11 : la rubrique en bouton (celui de la page clé : blanc, flèche orange, orange au survol) ; ses pages au même niveau, orange 23u, filets blancs 35 % ;
   « + » seulement pour une page qui a des sous-pages ; ouverte : son bouton « Découvrir … » puis ses sous-pages en blanc 17u */
.menu .sous .bouton-menu{display:inline-flex;align-items:center;align-self:flex-start;gap:.5em;padding:0 calc(22 * var(--u));background:#fff;color:#000;font-family:var(--sf);font-weight:700;font-size:max(12px, calc(17 * var(--u)));line-height:calc(50 * var(--u));white-space:nowrap;transition:background .25s, color .25s}
.menu .sous .bouton-menu::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);transition:transform .25s cubic-bezier(.2,.7,.15,1), color .25s}
.menu .sous .bouton-menu:hover{background:var(--orange);color:#fff}
.menu .sous .bouton-menu:hover::after{color:#fff;transform:translateX(3px)}
.menu .sous .bouton-menu.petit{margin:calc(4 * var(--u)) 0 calc(10 * var(--u));padding:0 calc(16 * var(--u));font-size:max(11px, calc(14 * var(--u)));line-height:calc(40 * var(--u))}
.menu .sous .liste{display:flex;flex-direction:column}
.menu .sous .pages{margin-top:calc(38 * var(--u));border-bottom:1px solid rgba(255,255,255,.35)}
.menu .sous .ligne, .menu .sous .grp{border-top:1px solid rgba(255,255,255,.35)}
.menu .sous .ligne{animation:msg .35s cubic-bezier(.2,.7,.15,1) both}
.menu .sous .ligne a, .menu .sous .grp-titre{display:block;width:100%;box-sizing:border-box;margin:0;padding:calc(22 * var(--u)) calc(34 * var(--u)) calc(22 * var(--u)) 0;background:transparent;border:0;color:var(--orange);font-family:var(--sf);font-weight:700;font-size:max(13px, calc(23 * var(--u)));line-height:1.15;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:padding-left .25s cubic-bezier(.2,.7,.15,1), color .2s}
.menu .sous .ligne a:hover, .menu .sous .grp-titre:hover{padding-left:calc(8 * var(--u))}
.menu .sous .ligne a:hover{color:#fff}
.menu .sous .grp-titre::after{font-size:calc(27 * var(--u))}
.menu .sous .grp-liste .dedans{min-height:0;overflow:hidden}
.menu .sous .grp-liste ul{list-style:none;margin:0;padding:0}
.menu .sous .grp.ouvert .grp-liste .dedans{padding-bottom:calc(16 * var(--u))}
.menu .sous li{animation:msg .35s cubic-bezier(.2,.7,.15,1) both;line-height:normal}
.menu .sous .simples{margin:0}
.menu .grp{border:0}
.menu .grp-titre{position:relative;padding-right:calc(30 * var(--u))}
.menu .grp-titre::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:calc(24 * var(--u));color:var(--orange)}
.menu .grp.ouvert .grp-titre::after{content:"–"}
.menu .grp-liste{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.15,1)}   /* ouverture animée du groupe */
.menu .grp-liste > ul, .menu .grp-liste > .dedans{min-height:0;overflow:hidden;padding:0;margin:0}
.menu .grp.ouvert .grp-liste{grid-template-rows:1fr}
.menu .sous .grp li a{display:block;padding:calc(9 * var(--u)) 0 calc(9 * var(--u)) calc(22 * var(--u));font-size:max(11px, calc(17 * var(--u)));font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:padding-left .25s cubic-bezier(.2,.7,.15,1)}
.menu .sous .grp li a:hover{color:#fff;padding-left:calc(30 * var(--u))}
/* colonne de droite : fixe, la même pour toutes les catégories */
.menu .fixe{position:absolute;left:0;right:0;bottom:var(--fixe-bas, 0px);margin:0;padding:0;border:0}   /* « Sites Orange », calé en bas à la hauteur d'« Acteurs publics » (posé par le script), s'ouvre vers le haut */
.menu .fixe .grp{display:flex;flex-direction:column-reverse}
.menu .fixe .grp-titre{display:block;width:100%;text-align:left;background:none;border:0;padding:calc(10 * var(--u)) calc(30 * var(--u)) calc(10 * var(--u)) 0;font-size:max(12px, calc(21 * var(--u)));font-weight:700;color:var(--orange);cursor:pointer}
.menu .fixe .grp-liste > ul, .menu .fixe .grp-liste .dedans > ul{padding-top:calc(6 * var(--u))}   /* 02/11 : la liste et les réseaux sociaux dans le même dépliant */
.menu .fixe .grp li a{color:inherit;padding-left:0;padding-right:0;border-bottom:0}   /* les sites : même couleur que la colonne, ↗ orange à droite */
.menu .fixe .grp li a:hover{color:var(--orange);padding-left:0}
.menu .colonne.droite{justify-content:flex-start;position:absolute}   /* Confort+ tout en haut de sa colonne */
body.menu-ouvert .nav .gauche, body.menu-ouvert .nav .droite{opacity:0;pointer-events:none}   /* le sur-header s'efface à l'ouverture du menu ; restent le logo et le bouton */
.menu .fixe h4{font-size:max(10px, calc(12 * var(--u)));font-weight:700;color:var(--orange);margin:calc(30 * var(--u)) 0 calc(8 * var(--u))}
.menu .fixe h4:first-child{margin-top:0}
.menu .fixe .sans-fleche li a i{display:none}   /* Accès directs : sans flèche */
.menu .fixe li{font-weight:700;font-size:max(11px, calc(15 * var(--u)));line-height:2.1}
.menu .fixe li a{display:flex;justify-content:space-between;align-items:center;transition:color .2s}   /* texte à gauche, ↗ orange aligné à droite : un bloc rectangle */
.menu .fixe li a i{font-style:normal;color:var(--orange);transition:transform .25s cubic-bezier(.2,.7,.15,1)}
.menu .fixe li a:hover{color:var(--orange)}
.menu .fixe li a:hover i{transform:translate(calc(3 * var(--u)), calc(-3 * var(--u)))}
.menu .bas{position:absolute;left:0;right:0;top:calc(var(--sq-top) + var(--sq) + 28 * var(--u));text-align:center;font-size:max(9px, calc(10 * var(--u)));font-weight:700;color:rgba(255,255,255,.45)}

/* ---------- Essai : menu en blanc (classe « clair » sur .menu ; retirer la classe pour revenir au noir) ---------- */
.menu.clair{background:#fff;color:#000}
.menu.clair .cats a{color:rgba(0,0,0,.3)}
.menu.clair .cats li.bouton a{color:#fff}
.menu.clair .cats li.actif a{color:#000}
.menu.clair .fixe li{color:#000}
.menu.clair .bas{color:rgba(0,0,0,.45)}
.menu.clair .cadre{background:var(--orange)}
.menu.clair .cadre.categorie{background:#000}   /* même poids que la règle « clair » : un onglet ouvert, le carré est noir sous la photo */
body.menu-ouvert .nav{color:#000}
body.menu-ouvert .burger:hover{background:rgba(0,0,0,.06)}
body.menu-ouvert .burger span{background:#000}

/* les infos du haut (liens, bourse, Confort+, langue) s'effacent dès qu'on parcourt la page, reviennent en haut */
body.defile .nav .ligne{opacity:0;transform:translateY(-6px);pointer-events:none}
/* 30/10 : le sur-en-tête est le même sur toutes les pages — il s'efface en descendant, revient dès qu'on remonte (classe `defile`) ; blanc sur les zones sombres, noir sur les claires (`fond-clair`, posée par chaque page) */
.nav{color:#fff}
body.fond-clair .nav{color:#000}
body.fond-clair .burger span{background:#000}

/* ---------- 02/11 : les questions suggérées — un bloc blanc qui sort au-dessus de la barre IA au focus ---------- */
.suggestions{position:fixed;z-index:41;display:flex;flex-direction:column;gap:calc(2 * var(--u));padding:calc(14 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));background:#fff;color:#000;box-shadow:0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.18);opacity:0;transform:translateY(calc(14 * var(--u)));transition:opacity .25s, transform .32s cubic-bezier(.2,.7,.15,1)}
.suggestions[hidden]{display:none}
.suggestions.visible{opacity:1;transform:none}
.suggestions .titre{padding:0 calc(10 * var(--u)) calc(8 * var(--u));font-size:max(11px, calc(13 * var(--u)));font-weight:600;color:#8c8c8c}   /* écrit normalement, la typo de base (02/11) */
.suggestions button{display:flex;align-items:center;gap:calc(10 * var(--u));width:100%;padding:calc(9 * var(--u)) calc(10 * var(--u));border:0;background:transparent;font:inherit;font-weight:600;font-size:max(11px, calc(14 * var(--u)));color:#000;text-align:left;cursor:pointer;transition:background .15s}
.suggestions button:hover{background:#f4f4f4}
.suggestions button svg{width:calc(14 * var(--u));height:calc(14 * var(--u));flex:none}
body.mode-actu .suggestions, body.mode-video .suggestions{display:none}   /* sur l'actualité et la vidéo, le carré orange a une autre action */

/* ---------- 02/11 : les questions de l'IA, comme dans Claude — une carte blanche qui sort au-dessus de la barre où l'on écrit (commun.js, poseQuestions) ---------- */
.question-ia{position:fixed;z-index:42;box-sizing:border-box;background:#fff;color:#000;box-shadow:0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.2);opacity:0;transform:translateY(calc(16 * var(--u)));transition:opacity .25s, transform .35s cubic-bezier(.2,.7,.15,1)}
.question-ia.visible{opacity:1;transform:none}
.question-ia .tete{display:flex;justify-content:space-between;align-items:baseline;gap:calc(20 * var(--u));padding:calc(20 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u))}
.question-ia .tete b{font-weight:700;font-size:max(12px, calc(16 * var(--u)));line-height:1.3}
.question-ia .tete span{flex:none;font-weight:700;font-size:max(9px, calc(11 * var(--u)));color:#8c8c8c}
.question-ia ul{list-style:none;margin:0;padding:0;max-height:calc(var(--sq) * .62);overflow:auto;scrollbar-width:none}
.question-ia li{position:relative;border-top:1px solid #ececec}
.question-ia label{display:flex;align-items:flex-start;gap:calc(16 * var(--u));padding:calc(14 * var(--u)) calc(24 * var(--u));cursor:pointer;transition:background .15s}
.question-ia label:hover{background:#f7f7f7}
.question-ia ul input[type=radio], .question-ia ul input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.question-ia label i{position:relative;flex:none;width:calc(18 * var(--u));height:calc(18 * var(--u));min-width:14px;min-height:14px;margin-top:calc(1 * var(--u));box-sizing:border-box;border:1.5px solid #000;transition:background .15s, border-color .15s}
.question-ia input:checked + i{background:var(--orange);border-color:var(--orange)}
.question-ia input:checked + i::after{content:"";position:absolute;left:28%;top:12%;width:30%;height:52%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.question-ia input:focus-visible + i{outline:2px solid var(--orange);outline-offset:2px}
.question-ia label span b{display:block;font-weight:700;font-size:max(12px, calc(15 * var(--u)));line-height:1.3}
.question-ia label span small{display:block;margin-top:calc(4 * var(--u));font-size:max(11px, calc(13 * var(--u)));line-height:1.45;color:#707070}
.question-ia .autre{display:block;box-sizing:border-box;width:calc(100% - 82 * var(--u));margin:0 calc(24 * var(--u)) calc(14 * var(--u)) calc(58 * var(--u));padding:calc(8 * var(--u)) 0;border:0;border-bottom:1px solid #000;background:transparent;font:inherit;font-size:max(12px, calc(14 * var(--u)));outline:0}
.question-ia .autre[hidden]{display:none}
.question-ia .pied-q{display:flex;justify-content:flex-end;gap:calc(8 * var(--u));padding:calc(14 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u));border-top:1px solid #ececec}
.question-ia .pied-q button{display:inline-flex;align-items:center;gap:calc(6 * var(--u));height:calc(38 * var(--u));min-height:30px;padding:0 calc(14 * var(--u));border:0;font:inherit;font-weight:700;font-size:max(11px, calc(13 * var(--u)));cursor:pointer;transition:background .2s, color .2s}
.question-ia .passer{background:#f0f0f0;color:#000}
.question-ia .passer:hover{background:#e2e2e2}
.question-ia .suivant{background:#000;color:#fff}
.question-ia .suivant:hover{background:var(--orange)}
.question-ia .suivant:disabled{background:#f0f0f0;color:#b5b5b5;cursor:default}
.question-ia kbd{display:inline-grid;place-items:center;min-width:calc(18 * var(--u));height:calc(18 * var(--u));padding:0 calc(3 * var(--u));box-sizing:border-box;border:1px solid currentColor;opacity:.55;font:inherit;font-size:max(9px, calc(10 * var(--u)))}
.question-ia kbd:first-of-type{margin-left:calc(6 * var(--u))}
body.question-ouverte .suggestions{display:none}

/* ---------- 02/11 : le lecteur de documents — le document à gauche, page par page ; l'IA à droite ---------- */
.lecteur{position:fixed;inset:0;z-index:36;display:grid;grid-template-columns:calc(520 * var(--u)) minmax(0, 1fr);gap:calc(40 * var(--u));padding:calc(96 * var(--u)) calc(99 * var(--u)) calc(50 * var(--u));background:#e9e9e9;color:#000;opacity:0;pointer-events:none;transition:opacity .3s}
.lecteur[hidden]{display:none}
body.lecteur-ouvert .lecteur{opacity:1;pointer-events:auto}
.lecteur .fermer{position:absolute;right:calc(99 * var(--u));top:calc(34 * var(--u));width:calc(40 * var(--u));height:calc(40 * var(--u));border:0;background:none;font-size:calc(34 * var(--u));line-height:1;color:#000;cursor:pointer}
.lecteur-doc{display:flex;flex-direction:column;min-width:0;min-height:0}
.lecteur-tete{display:grid;grid-template-columns:calc(44 * var(--u)) minmax(0, 1fr) auto;gap:calc(18 * var(--u));align-items:center;margin-bottom:calc(24 * var(--u))}
.lecteur-tete .fichier{display:grid;place-items:center;width:calc(44 * var(--u));height:calc(54 * var(--u));box-sizing:border-box;border:1px solid #000;font-weight:700;font-size:max(9px, calc(11 * var(--u)))}
.lecteur-tete .fichier svg{width:calc(26 * var(--u));height:calc(26 * var(--u))}
.lecteur-tete b{display:block;font-weight:700;font-size:max(14px, calc(21 * var(--u)));line-height:1.2}
.lecteur-tete small{display:block;margin-top:calc(3 * var(--u));font-size:max(10px, calc(14 * var(--u)));color:#8c8c8c}
.lecteur-tete .telecharger{display:inline-flex;align-items:center;height:calc(44 * var(--u));padding:0 calc(20 * var(--u));background:#000;color:#fff;font-weight:700;font-size:max(11px, calc(14 * var(--u)))}
.lecteur .pages{flex:1;min-height:0;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:calc(30 * var(--u));padding:calc(4 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u))}
.lecteur .pages::-webkit-scrollbar{display:none}
.lecteur .page{position:relative;flex:none;width:calc(640 * var(--u));aspect-ratio:210 / 297;margin:0 auto;box-sizing:border-box;padding:calc(64 * var(--u)) calc(60 * var(--u));background:#fff;box-shadow:0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.16);transition:box-shadow .4s}
.lecteur .page.cible{box-shadow:0 0 0 2px var(--orange), 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.16)}
.lecteur .page .logo-doc{position:relative;width:calc(36 * var(--u));height:calc(36 * var(--u));margin-bottom:calc(150 * var(--u));background:var(--orange)}
.lecteur .page .logo-doc::after{content:"";position:absolute;left:calc(5 * var(--u));bottom:calc(5 * var(--u));width:calc(26 * var(--u));height:calc(5 * var(--u));background:#fff}
.lecteur .page h2{margin:0 0 calc(20 * var(--u));font-family:var(--hn);font-weight:700;font-size:calc(40 * var(--u));line-height:1.05}
.lecteur .page.couverture small{display:block;font-weight:700;font-size:max(10px, calc(13 * var(--u)));color:#8c8c8c}
.lecteur .page h3{margin:0 0 calc(18 * var(--u));font-weight:700;font-size:calc(24 * var(--u));line-height:1.15}
.lecteur .page p{margin:0 0 calc(22 * var(--u));font-size:max(12px, calc(15 * var(--u)));line-height:1.6;color:#333}
.lecteur .page .lignes{height:calc(280 * var(--u));background:repeating-linear-gradient(#e8e8e8 0 calc(8 * var(--u)), transparent calc(8 * var(--u)) calc(22 * var(--u)))}
.lecteur .page .num{position:absolute;right:calc(40 * var(--u));bottom:calc(28 * var(--u));font-weight:700;font-size:max(9px, calc(11 * var(--u)));color:#8c8c8c}
.lecteur-ia{order:-1;display:flex;flex-direction:column;min-height:0;box-sizing:border-box;padding:calc(30 * var(--u));background:#fff;box-shadow:0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.16)}
.lecteur-ia > .qui{display:flex;align-items:center;gap:calc(8 * var(--u));margin-bottom:calc(18 * var(--u));font-size:max(9px, calc(11 * var(--u)));font-weight:700}
.lecteur-ia > .qui i{position:relative;width:calc(14 * var(--u));height:calc(14 * var(--u));background:var(--orange)}
.lecteur-ia > .qui i::after{content:"";position:absolute;left:calc(2 * var(--u));bottom:calc(2 * var(--u));width:calc(10 * var(--u));height:calc(2 * var(--u));background:#fff}
.lecteur-ia > .qui span{color:rgba(0,0,0,.4)}
.lecteur-ia .actions{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u));margin-bottom:calc(18 * var(--u))}
.lecteur-ia .actions button{display:inline-flex;align-items:center;gap:.5em;padding:calc(9 * var(--u)) calc(12 * var(--u));border:0;background:#f4f4f4;font:inherit;font-weight:700;font-size:max(10px, calc(12 * var(--u)));color:#000;cursor:pointer;transition:background .2s, color .2s}
.lecteur-ia .actions button svg{width:1em;height:1em}
.lecteur-ia .actions button:hover{background:#000;color:#fff}
.lecteur-ia .fil-doc{flex:1;min-height:0;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:calc(16 * var(--u));padding-right:calc(6 * var(--u))}
.lecteur-ia .fil-doc::-webkit-scrollbar{display:none}
.lecteur-ia .fil-doc .msg.ia > .qui{display:none}   /* l'en-tête est celui du panneau */
.lecteur-ia .fil-doc .source[data-page]{cursor:pointer}
.lecteur-ia form.lecteur-barre{flex:none;width:100%;height:calc(64 * var(--u));margin:calc(18 * var(--u)) 0 0;padding:0 calc(10 * var(--u)) 0 calc(18 * var(--u));gap:calc(12 * var(--u));border:1px solid #cfcfcf;box-shadow:none}   /* plus précis que .ecrire-ia.assistant (blocs.css, chargé après) : la barre reste dans son panneau */
.lecteur-ia form.lecteur-barre input{font-size:max(12px, calc(15 * var(--u)))}
.lecteur-ia form.lecteur-barre .ico{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.lecteur-ia form.lecteur-barre .carre{width:calc(44 * var(--u));height:calc(44 * var(--u))}
.lecteur-ia form.lecteur-barre .carre svg{width:46%;height:46%}
body.lecteur-ouvert #barre, body.lecteur-ouvert .bascule-mobile, body.lecteur-ouvert .suggestions{opacity:0 !important;pointer-events:none}
body.lecteur-ouvert .nav .gauche, body.lecteur-ouvert .nav .droite{opacity:0;pointer-events:none}
body.lecteur-ouvert .nav{color:#000}
body.lecteur-ouvert .burger span{background:#000}
@media (max-width: 767px){
  .lecteur{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:16px;padding:70px 16px 16px}
  .lecteur .fermer{right:12px;top:12px}
  .lecteur .page{width:100%;padding:28px 24px}
  .lecteur-ia{max-height:46vh;padding:16px}
  .suggestions{left:14px !important;width:calc(100vw - 28px) !important}
}

/* 02/11 : plus de flèche dans les boutons (menu, page clé, renvoi de section, liens de la conversation) ; les liens texte gardent la leur */
.menu .sous .bouton-menu::after, .page-cle .bouton::after, .g-texte .bouton-renvoi::after, .texte-ref .bouton-renvoi::after, .msg .liens a::after{content:none !important}
.menu .sous .bouton-menu{gap:0}
/* 02/11 : dans la conversation et le menu, le carré orange de la barre reste carré (les modes de page qui l'étirent ne s'appliquent pas) */
body.conversation #barre.barre .envoi, body.menu-ouvert #barre.barre .envoi{width:calc(var(--bh) * 0.405) !important;height:calc(var(--bh) * 0.405) !important}
body.conversation #barre.barre.barre .envoi{width:calc(var(--bh) * 0.62 * 0.62) !important;height:calc(var(--bh) * 0.62 * 0.62) !important}
body.conversation #barre .envoi .resume, body.menu-ouvert #barre .envoi .resume{display:none}

/* ---------- Lecture à voix haute (02/11, comme sur ENGIE) : sous les réponses de l'IA, un bouton noir « Lire à voix haute » (icône orange)
   qui devient un petit lecteur noir : pause, temps, piste (filet blanc, avancée orange, curseur carré blanc), durée ; « Voix générée par IA » dessous.
   Sur Notre histoire, la barre devient ce lecteur : temps, piste, durée, « × » (fond blanc, piste noire et orange) ; le carré orange met en pause et reprend. ---------- */
.voix{margin:calc(22 * var(--u)) 0 calc(4 * var(--u))}
.voix-lire, .voix-player{display:inline-flex;align-items:center;box-sizing:border-box;height:calc(46 * var(--u));min-height:36px;padding:0 calc(18 * var(--u));background:#000;color:#fff}
.voix-lire{gap:calc(12 * var(--u));border:0;font:inherit;font-weight:700;font-size:max(12px, calc(15 * var(--u)));cursor:pointer;transition:background .2s}
.voix-lire:hover{background:var(--orange)}
.voix-lire svg, .voix-pp svg{width:calc(22 * var(--u));height:calc(22 * var(--u));min-width:18px;min-height:18px;color:var(--orange)}
.voix-lire:hover svg{color:#fff}
.voix-player{gap:calc(12 * var(--u));width:calc(340 * var(--u));min-width:260px}
.voix-lire[hidden], .voix-player[hidden]{display:none}
.voix-pp{flex:none;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.voix .t, .voix .d{flex:none;font-weight:700;font-size:max(10px, calc(12 * var(--u)));font-variant-numeric:tabular-nums}
.voix-piste{position:relative;flex:1;align-self:stretch;cursor:pointer;--p:0%}
.voix-piste::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.3)}
.voix-piste i{position:absolute;left:0;top:50%;width:var(--p);height:2px;margin-top:-1px;background:var(--orange)}
.voix-piste b{position:absolute;left:var(--p);top:50%;width:calc(10 * var(--u));height:calc(10 * var(--u));min-width:8px;min-height:8px;transform:translate(-50%, -50%);background:#fff}
.voix small{display:block;margin-top:calc(8 * var(--u));font-weight:600;font-size:max(9px, calc(11 * var(--u)));color:rgba(0,0,0,.45)}
/* la barre en player */
.barre .ecoute{position:absolute;left:0;right:0;top:50%;display:flex;align-items:center;gap:calc(var(--bh) * 0.13);height:calc(var(--bh) * 0.5);transform:translateY(calc(-50% + 140%));opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.2,.7,.15,1), opacity .35s}
body:is(.mode-ecoute, .ecoute-prete):not(.menu-ouvert):not(.conversation) .barre .ecoute{transform:translateY(-50%);opacity:1;pointer-events:auto;transition-delay:.12s}
body:is(.mode-ecoute, .ecoute-prete):not(.menu-ouvert):not(.conversation) .roll, body:is(.mode-ecoute, .ecoute-prete):not(.menu-ouvert):not(.conversation) .barre input, body:is(.mode-ecoute, .ecoute-prete):not(.menu-ouvert):not(.conversation) .barre .ico{transform:translateY(-140%) !important;opacity:0 !important;pointer-events:none !important}
body:is(.mode-ecoute, .ecoute-prete):not(.menu-ouvert):not(.conversation) .barre .ico{width:0 !important;margin:0 !important;overflow:hidden}   /* le micro se replie : la piste prend la place */
.barre .ecoute .t, .barre .ecoute .d{flex:none;font-weight:700;font-size:max(10px, calc(var(--bh) * 0.1));font-variant-numeric:tabular-nums;color:#000}
.barre .ecoute .voix-piste::before{background:rgba(0,0,0,.15)}
.barre .ecoute .voix-piste b{background:#000}
.barre .ecoute-fin{flex:none;display:grid;place-items:center;width:calc(var(--bh) * 0.3);height:calc(var(--bh) * 0.3);min-width:22px;min-height:22px;padding:0;border:0;background:none;color:#000;cursor:pointer;transition:color .2s}
.barre .ecoute-fin:hover{color:var(--orange)}
.barre .ecoute-fin svg{width:55%;height:55%}
.barre .envoi .pp{display:none}
body:is(.mode-ecoute, .ecoute-prete):not(.menu-ouvert):not(.conversation) .barre .envoi .etoile{display:none}
body:is(.mode-ecoute, .ecoute-prete):not(.menu-ouvert):not(.conversation) .barre .envoi .pp{display:block}
body:is(.mode-ecoute, .ecoute-prete):not(.menu-ouvert):not(.conversation) #barre .auteur-b{opacity:0 !important}   /* une citation écoutée : le player prend toute la barre blanche, à la place de la carte de l'auteur */
/* le lecteur en attente (02/11, Notre histoire) : « Écouter l'histoire », la piste à zéro, la durée ; le carré orange en lecture */
.barre .ecoute .libelle{display:none;flex:none;font-weight:700;font-size:max(11px, calc(var(--bh) * 0.13));color:#000;white-space:nowrap}
body.ecoute-prete .barre .ecoute .libelle{display:block}
body.ecoute-prete .barre .ecoute .t, body.ecoute-prete .barre .ecoute-fin{display:none}
body.ecoute-prete #barre .auteur-b{opacity:0 !important}
/* le vrai PDF dans le lecteur (02/11) : le fichier lui-même, à la place des pages simulées */
.lecteur .pages.pdf-reel{padding:0 calc(30 * var(--u)) calc(30 * var(--u));overflow:hidden}
.lecteur .pdf-reel iframe{display:block;width:100%;height:100%;border:0;background:#fff;box-shadow:0 calc(6 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.12)}
/* « Écosystème Orange » (02/11) : dans le dépliant, les sites, un filet, puis les réseaux sociaux en icônes */
.menu .fixe .sociaux{display:flex;gap:calc(18 * var(--u));margin:calc(12 * var(--u)) 0 calc(10 * var(--u));padding-top:calc(16 * var(--u));border-top:1px solid currentColor;border-top-color:rgba(127,127,127,.35)}
.menu .fixe .sociaux a{display:grid;place-items:center;width:calc(26 * var(--u));height:calc(26 * var(--u));min-width:22px;min-height:22px;color:inherit;transition:color .2s}
.menu .fixe .sociaux a:hover, .menu .fixe .sociaux a:focus-visible{color:var(--orange)}
.menu .fixe .sociaux svg{width:80%;height:80%}
/* ---------- Mode Confort+ (02/11, règles RGAA) : body.confort ---------- */
/* 03/11 : plus aucune animation ni transition ; les éléments qui attendaient leur animation sont là tout de suite */
html.confort, html.confort *{scroll-behavior:auto !important}
html.confort, html.confort.aimant{scroll-snap-type:none !important}   /* Confort+ : pas d'aimant entre les blocs, un défilement libre */
html.confort *, html.confort *::before, html.confort *::after{animation:none !important;transition:none !important}
html.confort .titre-mots .m, html.confort .mot{opacity:1 !important;transform:none !important;filter:none !important}
html.confort .g-hero .img, html.confort .bloc-redir .img{transform:none !important}
html.confort .roll span::after{opacity:1}
/* 03/11 : les textes sur image, surlignés en noir ligne à ligne (comme engie.com) */
html.confort .surligne{background:#000;color:#fff;padding:.06em .28em;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:none !important}
html.confort .surligne *{text-shadow:none !important}
html.confort .titre-video-hero .mot-v > i, html.confort .titre-video-hero small > i{background:#000;padding:0 .2em;text-shadow:none}   /* le titre vidéo de l'accueil : chaque mot surligné */
html.confort .g-hero .outils-page a{background:#000;padding:calc(6 * var(--u)) calc(12 * var(--u));text-shadow:none}
/* 1. contraste derrière les textes posés sur une image : voiles plus sombres, ombre portée sur le texte */
body.confort .g-hero .voile, body.confort .g-epoque .voile{background:rgba(0,0,0,.66)}
body.confort .page-cle .img::after{background:rgba(0,0,0,.62)}
body.confort .g-pa::before{background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55) 40%, rgba(0,0,0,.85))}
body.confort .menu .voile{opacity:.9 !important}
body.confort :is(.g-hero, .g-epoque, .page-cle, .g-pa, .carre) :is(h1, h2, h3, p, small, .sur, .chapo, .annees, .tag, b, i, span){text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 calc(14 * var(--u)) rgba(0,0,0,.75)}
body.confort .carre::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.45);pointer-events:none}
/* 2. textes gris assombris : au moins 4,5:1 sur le fond */
body.confort :is(p, li, small, figcaption, td, th, dd, dt, label, .fn, .meta, .chapo, .sur, .date, .tb-note):not(.v3-chapo):not(.v3-redacteur):not(.v3-meta *){opacity:1 !important}   /* 03/11 : sauf le chapô et les infos de l'article, qui s'effacent quand l'article s'ouvre */
body.confort :is(.g-tv p, .texte-ref p, .texte-ref li, .contact-court p, .docs-ref small, .faq-ref p, .g-ch span, .bref-ref li, .v3-sec p, .v3-meta, .v3-chapo, .msg .source span, .msg.ia .qui span, .suggestions h4){color:#1a1a1a !important}
body.confort :is(.g-noir, .catch-citation, .tb-ecran, .w-pied, [data-bs-theme="dark"]) :is(p, li, small, span, th, td){color:#fff !important}
body.confort .tb-ecran .var{color:#fff !important;background:rgba(255,255,255,.18) !important}
/* 3. espacements de lecture (critère 10.12) */
body.confort :is(p, li, dd, td){line-height:1.75 !important;letter-spacing:.012em;word-spacing:.06em}
/* 4. liens soulignés, focus très visible */
body.confort :is(main, #gp, #article, .v3-suite, .menu, .conv) a:not(.bouton):not(.btn):not(.g-pa):not(.bouton-menu):not(.w-lien):not(.g-lien){text-decoration:underline;text-underline-offset:.18em}
body.confort :focus-visible{outline:3px solid #000 !important;outline-offset:3px !important;box-shadow:0 0 0 6px #fff !important}
/* 5. les textes s'affichent sans attendre leur animation */
body.confort .rev, body.confort .mot, body.confort .catch-citation .mot{opacity:1 !important;transform:none !important;filter:none !important}
/* ---------- 02/11 : la réponse de recherche, comme un aperçu IA de moteur de recherche ----------
   1. l'encart « mode IA » (fond gris clair) : l'en-tête habituel, la réponse coupée en fondu, « Afficher plus » ; 2. les résultats classiques ; 3. « Autres questions » */
.msg.ia.apercu{background:#f4f4f4;padding:calc(26 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u))}
.msg.ia.apercu .corps-ia{position:relative;max-height:calc(250 * var(--u));overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.15,1)}
.msg.ia.apercu .corps-ia::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(90 * var(--u));background:linear-gradient(rgba(244,244,244,0), #f4f4f4);pointer-events:none}
.msg.ia.apercu .afficher-plus{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));width:100%;height:calc(46 * var(--u));min-height:38px;margin-top:calc(14 * var(--u));border:1px solid #000;background:#fff;color:#000;font:inherit;font-weight:700;font-size:max(12px, calc(15 * var(--u)));cursor:pointer;transition:background .2s, color .2s}
.msg.ia.apercu .afficher-plus[hidden]{display:none}
.msg.ia.apercu .afficher-plus:hover{background:#000;color:#fff}
.msg.ia.apercu .afficher-plus svg{width:calc(18 * var(--u));height:calc(18 * var(--u));min-width:14px;min-height:14px;color:var(--orange);transition:transform .3s}
/* les résultats classiques : le site (logo, chemin), le titre, l'extrait daté, le type, une vignette */
.resultats.google{border-top:0;padding-top:calc(6 * var(--u))}
.resultats.google .res{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:calc(22 * var(--u));align-items:start;padding:calc(20 * var(--u)) 0;border-bottom:1px solid rgba(0,0,0,.08);color:inherit;text-decoration:none;cursor:pointer}
.resultats.google .res:hover{background:none}
.resultats.google .site{display:flex;align-items:center;gap:calc(10 * var(--u))}
.resultats.google .ico-site{flex:none;position:relative;width:calc(28 * var(--u));height:calc(28 * var(--u));min-width:22px;min-height:22px;background:var(--orange)}
.resultats.google .ico-site i{position:absolute;left:18%;right:18%;bottom:20%;height:12%;background:#fff}
.resultats.google .site b{display:block;font-weight:700;font-size:max(11px, calc(14 * var(--u)));color:#000}
.resultats.google .site small{display:block;font-weight:600;font-size:max(10px, calc(12.5 * var(--u)));color:#4d4d4d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resultats.google .res h6{margin:calc(10 * var(--u)) 0 calc(6 * var(--u));font-size:max(14px, calc(20 * var(--u)));font-weight:700;line-height:1.25;color:#000}
.resultats.google .res:hover h6{color:var(--orange);text-decoration:underline;text-underline-offset:.15em}
.resultats.google .extrait{margin:0;font-size:max(11px, calc(14 * var(--u)));line-height:1.55;color:#4d4d4d;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.resultats.google .extrait b{color:#000;font-weight:700}
.resultats.google .type{display:inline-block;margin-top:calc(10 * var(--u));background:#000;color:#fff;font-weight:700;font-size:max(9px, calc(11 * var(--u)));padding:calc(3 * var(--u)) calc(8 * var(--u))}
.resultats.google .vis{display:block;width:calc(110 * var(--u));height:calc(110 * var(--u));min-width:70px;min-height:70px;background:#ddd center / cover no-repeat}
/* autres questions */
.autres-q{align-self:stretch;margin-top:calc(10 * var(--u))}
.autres-q h5{margin:0 0 calc(10 * var(--u));font-weight:700;font-size:max(15px, calc(22 * var(--u)));color:#000}
.autres-q button{display:flex;align-items:center;justify-content:space-between;gap:calc(20 * var(--u));width:100%;padding:calc(16 * var(--u)) 0;border:0;border-bottom:1px solid rgba(0,0,0,.12);background:none;font:inherit;font-weight:600;font-size:max(12px, calc(16 * var(--u)));color:#000;text-align:left;cursor:pointer}
.autres-q button i{flex:none;display:grid;place-items:center;width:calc(38 * var(--u));height:calc(38 * var(--u));min-width:30px;min-height:30px;border-radius:50%;background:#f0f0f0;transition:background .2s, color .2s}
.autres-q button i svg{width:50%;height:50%}
.autres-q button:hover{color:var(--orange)}
.autres-q button:hover i{background:#000;color:#fff}
/* l'en-tête de l'aperçu IA (02/11) : l'étoile IA, « Aperçu IA » en noir, « En savoir plus » à droite */
.msg.ia .qui.apercu-tete{gap:calc(10 * var(--u))}
.msg.ia .qui.apercu-tete .etoile-ia{display:grid;place-items:center;width:calc(22 * var(--u));height:calc(22 * var(--u));min-width:18px;min-height:18px}
.msg.ia .qui.apercu-tete .etoile-ia svg{width:100%;height:100%}
.msg.ia .qui.apercu-tete b{font-weight:700;font-size:max(12px, calc(15 * var(--u)));color:#000}
/* ---------- 02/11 : onglets, chargement, conversation IA en plein écran ---------- */
/* les onglets en haut, comme un moteur de recherche : l'onglet actif souligné d'orange */
.onglets-rech{position:sticky;top:calc(-48 * var(--u));z-index:3;align-self:stretch;display:flex;flex-wrap:wrap;gap:0 calc(26 * var(--u));margin:calc(-48 * var(--u)) calc(-56 * var(--u)) 0;padding:calc(18 * var(--u)) calc(56 * var(--u)) 0;background:#fff;border-bottom:1px solid rgba(0,0,0,.12)}
.onglets-rech button{display:inline-flex;align-items:center;gap:calc(8 * var(--u));padding:calc(12 * var(--u)) 0;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;font:inherit;font-weight:700;font-size:max(12px, calc(14.5 * var(--u)));color:#595959;cursor:pointer;transition:color .2s, border-color .2s}
.onglets-rech button svg{width:calc(16 * var(--u));height:calc(16 * var(--u));min-width:13px;min-height:13px}
.onglets-rech button:hover{color:#000}
.onglets-rech button.actif{color:#000;border-bottom-color:var(--orange)}
body.conv-pleine .onglets-rech{margin:calc(-130 * var(--u)) calc(-99 * var(--u)) 0;padding:calc(84 * var(--u)) calc(99 * var(--u)) 0;top:calc(-130 * var(--u))}
/* le chargement : l'étoile IA qui pulse et tourne doucement */
.chargement-ia{display:flex;align-items:center;gap:calc(14 * var(--u));padding:calc(30 * var(--u)) 0;font-weight:700;font-size:max(12px, calc(15 * var(--u)));color:#000}
.chargement-ia .etoile-charge{display:grid;place-items:center;width:calc(30 * var(--u));height:calc(30 * var(--u));min-width:22px;min-height:22px;animation:etoile-charge 1.4s cubic-bezier(.4,0,.6,1) infinite}
.chargement-ia .etoile-charge svg{width:100%;height:100%}
@keyframes etoile-charge{0%{transform:scale(.8) rotate(0)}50%{transform:scale(1.12) rotate(45deg)}100%{transform:scale(.8) rotate(90deg)}}
.msg .chargement-ia{padding:calc(6 * var(--u)) 0}
@media (prefers-reduced-motion: reduce){ .chargement-ia .etoile-charge{animation:none} }
/* la page de résultats (onglet Tout et types) : la question et les suites de conversation restent dans la conversation IA */
body:not(.mode-reponse) #fil > .msg.suite, body:not(.mode-reponse) #fil .suite-ia{display:none}
/* la conversation IA, en plein écran : la question, la réponse complète, les questions suivantes ; plus les résultats */
body.mode-reponse #fil > :is(.resultats, .autres-q, .chargement-ia){display:none}
body.mode-reponse .msg.ia.apercu .corps-ia{max-height:none}
body.mode-reponse .msg.ia.apercu .corps-ia::after, body.mode-reponse .msg.ia.apercu .afficher-plus{display:none}
body.mode-reponse #fil > .msg.ia{align-self:center;width:min(100%, calc(900 * var(--u)));box-sizing:border-box}
body.mode-reponse #fil > .msg.moi{margin-right:max(0px, calc((100% - 900 * var(--u)) / 2))}
.resultats.google .res.cache{display:none}   /* le filtre des onglets (02/11) */
.resultats.google .aucun{margin:calc(20 * var(--u)) 0;font-weight:600;color:#4d4d4d}
/* 02/11 : la requête dans une bulle à droite, dans tous les onglets ; Pages, Articles… : les résultats seuls ; la croix de fermeture au bout des onglets */
#fil > .msg.moi{align-self:flex-end}   /* 02/11 : la requête à droite, comme dans une conversation */
body.filtre-type #fil > .msg.apercu{display:none}
.onglets-rech .fermer-rech{display:grid;place-items:center;align-self:center;margin-left:auto;width:calc(34 * var(--u));height:calc(34 * var(--u));min-width:28px;min-height:28px;padding:0;border:0;background:none;color:#000;cursor:pointer;transition:color .2s, background .2s}
.onglets-rech .fermer-rech svg{width:55%;height:55%}
.onglets-rech .fermer-rech:hover{background:#f0f0f0;color:var(--orange)}
.conv .cadre:has(.onglets-rech) > .fermer, .conv .cadre:has(.onglets-rech) > .reduire{display:none}
/* « Autres questions » dans la conversation IA (02/11) : le titre à la taille du mode normal, des boutons qui se lisent comme cliquables */
.msg.ia.apercu .titre-aq{margin:calc(30 * var(--u)) 0 calc(14 * var(--u));font-weight:700;font-size:max(15px, calc(22 * var(--u)));letter-spacing:0;text-transform:none;color:#000}
.msg.ia.apercu .aq{display:flex;flex-wrap:wrap;gap:calc(10 * var(--u))}
.msg.ia.apercu .aq button{display:inline-flex;align-items:center;gap:calc(12 * var(--u));min-height:calc(46 * var(--u));padding:calc(10 * var(--u)) calc(18 * var(--u));border:1.5px solid #000;background:#fff;color:#000;font:inherit;font-weight:700;font-size:max(12px, calc(16 * var(--u)));line-height:1.3;text-align:left;cursor:pointer;transition:background .2s, color .2s}
.msg.ia.apercu .aq button i{font-style:normal;color:var(--orange);transition:transform .25s cubic-bezier(.2,.7,.15,1), color .2s}
.msg.ia.apercu .aq button:hover, .msg.ia.apercu .aq button:focus-visible{background:#000;color:#fff}
.msg.ia.apercu .aq button:hover i{transform:translateX(calc(4 * var(--u)))}
/* 03/11 : « Je cherche un emploi chez Orange » (la logique d'EVA, engie.jobs) dans la conversation IA plein écran :
   le récapitulatif (question, réponse, « Modifier »), les offres en cartes, le CTA orange.jobs, les liens ; « Modifier » grise la réponse et ouvre la question dessous */
.msg.ia.emploi .em-titre{margin:0 0 calc(10 * var(--u));font-weight:700;font-size:max(17px, calc(26 * var(--u)));line-height:1.2}
.msg.ia.emploi .em-intro{margin:0 0 calc(18 * var(--u));font-size:max(13px, calc(16 * var(--u)))}
.em-recap{display:flex;flex-direction:column;gap:calc(14 * var(--u));margin-bottom:calc(10 * var(--u))}
.em-q{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(20 * var(--u));font-size:max(12px, calc(15 * var(--u)))}
.em-rep{display:flex;flex-direction:column;align-items:flex-end;gap:calc(5 * var(--u))}
.em-rep b{padding:calc(8 * var(--u)) calc(14 * var(--u));background:#fff;border:1px solid #d6d6d6;font-weight:700}
.em-modifier{padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:max(10px, calc(12 * var(--u)));color:#000;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;cursor:pointer}
.em-modifier:hover{color:var(--orange)}
.em-suite{margin-top:calc(16 * var(--u));padding-top:calc(18 * var(--u));border-top:1px solid rgba(0,0,0,.1)}
.em-suite .texte p{margin:0 0 .7em;font-size:max(13px, calc(16 * var(--u)))}
.em-nb{margin:calc(20 * var(--u)) 0 calc(10 * var(--u));font-size:max(12px, calc(14 * var(--u)));color:#4d4d4d}
.em-nb b{color:#000}
.em-offres{display:flex;flex-direction:column;gap:calc(8 * var(--u))}
.em-offre{position:relative;display:block;padding:calc(18 * var(--u)) calc(56 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));background:#fff;border:1px solid #e0e0e0;color:#000;text-decoration:none;transition:border-color .2s, box-shadow .2s;animation:msg .4s cubic-bezier(.2,.7,.15,1) backwards}
.em-offre:nth-child(2){animation-delay:.06s} .em-offre:nth-child(3){animation-delay:.12s} .em-offre:nth-child(4){animation-delay:.18s} .em-offre:nth-child(5){animation-delay:.24s}
.em-offre:hover{border-color:#000;box-shadow:0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.08)}
.em-offre .em-tags{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u));margin-bottom:calc(10 * var(--u))}
.em-offre .em-tags i{font-style:normal;padding:calc(3 * var(--u)) calc(8 * var(--u));border:1px solid #000;font-weight:700;font-size:max(9px, calc(11 * var(--u)))}
.em-offre .em-tags i:first-child{background:#000;color:#fff}
.em-offre b{display:block;font-weight:700;font-size:max(13px, calc(17 * var(--u)));line-height:1.3}
.em-offre small{display:block;margin-top:calc(8 * var(--u));font-size:max(10px, calc(12.5 * var(--u)));color:#4d4d4d}
.em-offre .em-date{margin-top:calc(4 * var(--u));color:#767676}
.em-offre .ext{position:absolute;top:calc(18 * var(--u));right:calc(18 * var(--u));width:calc(16 * var(--u));height:calc(16 * var(--u));min-width:13px;min-height:13px;color:var(--orange)}
.em-cta{display:inline-flex;align-items:center;gap:calc(10 * var(--u));margin-top:calc(18 * var(--u));padding:calc(13 * var(--u)) calc(20 * var(--u));background:var(--orange);color:#fff;font-weight:700;font-size:max(12px, calc(15 * var(--u)));text-decoration:none;transition:background .2s}
.em-cta:hover{background:#000}
.em-cta .ext{width:calc(15 * var(--u));height:calc(15 * var(--u));min-width:12px;min-height:12px}
.em-liens{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u)) calc(22 * var(--u));margin-top:calc(18 * var(--u));padding-top:calc(16 * var(--u));border-top:1px solid rgba(0,0,0,.1)}
.em-liens a{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:max(11px, calc(13.5 * var(--u)));color:#000;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.em-liens a:hover{color:var(--orange)}
.em-liens .ext{width:calc(12 * var(--u));height:calc(12 * var(--u));min-width:10px;min-height:10px;color:var(--orange)}
/* « Modifier » : la réponse grisée, la question dessous (choix, Passer, Valider) */
.msg.ia.emploi.em-modif .corps-ia, .msg.ia.emploi.em-modif > .titre-aq, .msg.ia.emploi.em-modif > .aq{opacity:.3;pointer-events:none;transition:opacity .3s}
.em-question{margin:calc(20 * var(--u)) 0 0;padding:calc(20 * var(--u)) calc(22 * var(--u));border:1px solid #cfcfcf;background:#fff;animation:msg .35s cubic-bezier(.2,.7,.15,1)}
.em-question legend{float:left;width:100%;margin-bottom:calc(6 * var(--u));font-size:max(10px, calc(12 * var(--u)));color:#767676}
.em-question h4{clear:both;margin:0 0 calc(14 * var(--u));font-weight:700;font-size:max(14px, calc(18 * var(--u)))}
.em-champs{display:flex;flex-direction:column;gap:calc(10 * var(--u))}
.em-choix{display:flex;align-items:flex-start;gap:calc(10 * var(--u));cursor:pointer}
.em-choix input{margin:calc(3 * var(--u)) 0 0;accent-color:var(--orange);width:calc(16 * var(--u));height:calc(16 * var(--u));min-width:14px;min-height:14px}
.em-choix b{display:block;font-weight:700;font-size:max(12px, calc(15 * var(--u)))}
.em-choix small{display:block;font-size:max(10px, calc(12.5 * var(--u)));color:#595959}
.em-liste{display:flex;flex-direction:column;gap:calc(6 * var(--u));font-size:max(11px, calc(13 * var(--u)));font-weight:700}
.em-liste select{height:calc(44 * var(--u));min-height:36px;padding:0 calc(12 * var(--u));border:1px solid #9a9a9a;border-radius:0;background:#fff;font:inherit;font-weight:600}
.em-actions{display:flex;justify-content:flex-end;gap:calc(10 * var(--u));margin-top:calc(18 * var(--u))}
.em-actions button{height:calc(40 * var(--u));min-height:34px;padding:0 calc(18 * var(--u));border:1.5px solid #000;background:#fff;font:inherit;font-weight:700;font-size:max(12px, calc(14 * var(--u)));cursor:pointer}
.em-actions .em-valider{background:#000;color:#fff}
.em-actions button:hover{background:var(--orange);border-color:var(--orange);color:#fff}
/* 03/11 : le questionnaire d'EVA — les réponses montent dans le récapitulatif, la question en cours en carte (Passer / Valider, « Autre » et son champ libre) */
.em-q{animation:msg .35s cubic-bezier(.2,.7,.15,1)}
.em-pose .em-question{margin-top:calc(18 * var(--u))}
.em-question .em-aide{margin:0 0 calc(12 * var(--u));font-size:max(11px, calc(13 * var(--u)));color:#595959}
.em-question .em-libre{height:calc(42 * var(--u));min-height:34px;margin:calc(2 * var(--u)) 0 0 calc(26 * var(--u));padding:0 calc(12 * var(--u));border:1.5px solid #000;border-radius:0;font:inherit;font-size:max(12px, calc(14 * var(--u)))}
.em-question .em-libre[hidden]{display:none}
.em-actions .em-valider:disabled{background:#d6d6d6;border-color:#d6d6d6;color:#fff;cursor:default}
.em-actions .em-valider:disabled:hover{background:#d6d6d6;border-color:#d6d6d6}
.em-suite:empty{display:none}
html.confort :is(.g-hero h1, .page-cle h2, .bloc-redir h2, .g-epoque h2){line-height:1.24}   /* les grands titres surlignés : de la place pour les jambages */

/* 31/10 : version mobile — le burger de la barre et le lien « Agenda complet » n'existent qu'en version mobile (mobile.css) */
.barre .burger-b{display:none}
.agenda-m{display:none}

/* 05/11 : « Traduire » : la liste des langues, et l'interface de Google Traduction masquée */
.menu-langues{position:fixed;z-index:9000;box-sizing:border-box;width:calc(250 * var(--u));min-width:200px;max-height:min(calc(460 * var(--u)), 62vh);overflow-y:auto;margin:0;padding:calc(8 * var(--u)) 0;list-style:none;background:#fff;color:#000;box-shadow:0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.25);text-align:left}
.menu-langues[hidden]{display:none}
.menu-langues button{display:block;width:100%;padding:calc(9 * var(--u)) calc(18 * var(--u));border:0;background:none;color:inherit;font:inherit;font-weight:600;font-size:max(13px, calc(16 * var(--u)));line-height:1.3;text-align:left;cursor:pointer}
.menu-langues button:hover, .menu-langues button:focus-visible{background:#f0f0f0;outline:0}
.menu-langues button[aria-checked="true"]{color:var(--orange);font-weight:700}
#gt-cible{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body > .skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame{display:none !important}
body{top:0 !important}