/* =========================================================================
   ARTIS VALORISATION, REFONTE : « LA MISSION » DES TROIS OFFRES (offre-mission.css)
   Classes om-. Apres offre.css, avant la feuille propre de chaque offre.
   Critique 6 de Raphael (02/10/2026) : chaque point de « Ce que comprend
   l'evaluation » devient une bulle qui dit ce qu'il produit dans le rapport,
   et, a cote, son illustration, avec le dessin du « contenu du rapport » de
   l'accueil : une bande marine (seule zone sombre permise, celle du
   contenu du rapport), les points d'un cote, l'extrait de l'autre.
   Le script (offre-mission.js) pose .om-vivant : liste de depliants, un seul
   point ouvert, son illustration a droite, collante. Sans script, tout est
   deplie, chaque point suivi de son illustration : rien n'est cache.
   Critiques 1 et 2 de Raphael (02/10/2026, apres-midi) : le moins replie
   le point ouvert (.est-ouvert retire) ; a l'ordinateur, l'illustration
   montree (.est-montre) reste a sa place. Les figures a planche
   (.om-fig--planche) recoivent la vraie planche, vivante, a la place de
   son image (.om-fig--vif, section 3 bis).
   Deux colonnes au-dela de 1 100 px ; une seule en dessous.
   Contrastes (formule WCAG 2 ; fonds opaques, la scene ne passe pas
   dessous ; les mesures aux pixels du 02/10 donnent les memes valeurs) :
   - sur la bande #03021b : blanc 20,4:1, blanc a 86 % 14,9:1, azur #7FB0E8
     (numeros, etiquettes de 12 px) 9,0:1 ; depuis le 04/10/2026, la bande
     prend le bleu du rapport #15253E (--f-aplat, socle.css), comme celle
     de l'accueil : blanc 15,4:1, blanc a 86 % 11,7:1, azur 6,8:1 ;
   - dans la bulle blanche : encre 16,9:1, texte #26324a 12,8:1, Klein 10,7:1 ;
   - dans la fiche #132742 : blanc 15,0:1, blanc a 76 % 9,2:1, azur pale
     #A3C7F2 8,6:1 ; sur sa bande (#203756) : blanc 12,1:1, azur pale 6,9:1.
   ------------------------------------------------------------------------- */

/* =========================================================================
   1. LA BANDE
   La section garde son padding de scene (offre.css, .go-mission) : la scene
   reste visible au-dessus et au-dessous ; la bande marine, opaque, porte le
   contenu (scene.css, .f-bande--marine : jetons de texte blancs).
   ------------------------------------------------------------------------- */
.om-mission{
  --om-azur: var(--g-azur, #7FB0E8);
  --om-azur-pale: #A3C7F2;
  --om-fiche: #132742;                /* fond des pages sombres du rapport (pixels des extraits) */
  --om-texte-bulle: #26324a;          /* texte courant sur blanc (12,6:1), --go-texte-blanc */
  --om-filet: rgba(255,255,255,.14);
  --om-courbe: cubic-bezier(.23, 1, .32, 1);
  --om-duree: .32s;
}
.om-bande{ padding:128px 0 136px; }
.om-entete{ margin-bottom:64px; }
.om-entete .f-etiquette{ color:var(--f-texte); }
.om-chapo{ color:rgba(255,255,255,.86); }
.om-mission [id]{ scroll-margin-top:100px; }

/* =========================================================================
   2. LA LISTE, SANS SCRIPT
   Chaque point : sa bulle blanche, puis son illustration ; en deux colonnes
   au-dela de 1 100 px. Tout est lisible, rien n'est replie.
   ------------------------------------------------------------------------- */
.om-liste{ list-style:none; margin:0; padding:0; }
.om-point{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 560px); column-gap:64px; row-gap:20px;
  align-items:start;
}
.om-point + .om-point, .om-groupe + .om-point{ margin-top:56px; }
.om-groupe{ margin-top:56px; }
.om-bulle{ background:var(--f-blanc); color:var(--g-encre); border-radius:20px; }
.om-titre{
  margin:0; display:grid; grid-template-columns:36px minmax(0, 1fr); column-gap:8px; align-items:baseline;
  padding:22px 24px 0; font-size:19px; line-height:1.3; font-weight:500; letter-spacing:-0.015em;
  color:var(--g-encre); text-wrap:balance;
}
.om-no{
  font-size:13px; line-height:1; font-weight:500; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--g-klein);
}
.om-texte-corps{ padding:10px 24px 24px 68px; }
.om-texte p{ margin:0; font-size:16px; line-height:1.55; color:var(--om-texte-bulle); letter-spacing:-0.005em; text-wrap:pretty; }
.om-texte a, .om-carte a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
/* L'etiquette qui separe les deux lignes de l'ancien « detail des
   prestations » (offre a 990) : la hierarchie d'origine reste lisible. */
.om-groupe-etiquette{
  margin:0; font-size:12px; line-height:1.3; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--om-azur);
}

/* =========================================================================
   3. L'ILLUSTRATION : UN EXTRAIT, OU UNE FICHE EN TEXTE
   La legende au-dessus (elle ne bouge pas quand la hauteur de l'image
   change), l'image dessous, avec l'ombre des rangees de l'accueil
   (accueil.css, .f1-rang-image img). Les extraits ont leurs coins arrondis
   dans l'image (24 px sur 900) : le rayon les recouvre.
   ------------------------------------------------------------------------- */
.om-fig{ margin:0; min-width:0; }
.om-legende{ display:flex; flex-direction:column; gap:6px; margin:0 0 16px; }
.om-legende-sur{
  font-size:12px; line-height:1.3; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--om-azur);
}
.om-legende-nom{ font-size:18px; line-height:1.25; letter-spacing:-0.015em; color:rgba(255,255,255,.92); text-wrap:balance; }
.om-image{
  display:block; width:100%; height:auto; border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.30);
}
/* La fiche : le dessin d'une page sombre du rapport (titre, lignes filetees,
   bande du bas), sans pretendre en etre un extrait : la legende dit « Dans le
   rapport », jamais « extrait », et aucun numero de page. Elle prend sa
   hauteur naturelle (jury du 02/10/2026) : tenue au format des extraits
   (900 x 780), elle ouvrait entre ses lignes et sa bande un trou de 48 a
   169 px, qui se lisait comme un contenu manquant. La colonne ne saute pas
   pour autant : l'illustration est calee en haut de sa case (align-self),
   et la liste reserve la hauteur du plus long texte (offre-mission.js). */
.om-carte{
  display:flex; flex-direction:column; gap:22px;
  padding:36px 36px 32px; border-radius:14px; background:var(--om-fiche); color:var(--f-blanc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 24px 60px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.30);
}
.om-carte-titre{ margin:0; font-size:30px; line-height:1.12; font-weight:500; letter-spacing:-0.025em; text-wrap:balance; max-width:22ch; }
.om-carte-texte{ margin:0; font-size:16px; line-height:1.5; color:rgba(255,255,255,.76); text-wrap:pretty; }
.om-carte-lignes{ margin:0; }
.om-carte-lignes > div{
  display:grid; grid-template-columns:minmax(0, 9em) minmax(0, 1fr); column-gap:20px;
  padding:15px 0; border-top:1px solid var(--om-filet);
}
.om-carte-lignes > div:last-child{ border-bottom:1px solid var(--om-filet); }
.om-carte-lignes dt{ font-size:16px; line-height:1.4; font-weight:500; }
.om-carte-lignes dd{ margin:0; font-size:16px; line-height:1.4; color:rgba(255,255,255,.76); }
/* Les sept retraitements : le nom a gauche, son sens a droite, en azur pale */
.om-carte-lignes--sens > div{ grid-template-columns:minmax(0, 1fr) auto; padding:11px 0; }
.om-carte-lignes--sens dt{ font-weight:400; }
.om-carte-lignes--sens dd{ color:var(--om-azur-pale); text-align:right; white-space:nowrap; }
.om-carte-liste{ margin:0; padding:0; list-style:none; counter-reset:om; }
.om-carte-liste li{
  position:relative; padding:15px 0 15px 40px; border-top:1px solid var(--om-filet);
  font-size:16px; line-height:1.45; color:rgba(255,255,255,.88); counter-increment:om; text-wrap:pretty;
}
.om-carte-liste li:last-child{ border-bottom:1px solid var(--om-filet); }
.om-carte-liste li::before{
  content:counter(om, decimal-leading-zero); position:absolute; left:0; top:18px;
  font-size:12px; line-height:1.3; font-weight:500; letter-spacing:.06em; color:var(--om-azur-pale);
  font-variant-numeric:tabular-nums;
}
.om-carte-liste--simple li{ padding-top:11px; padding-bottom:11px; }
.om-carte-liste--simple li::before{ top:14px; }
/* La bande du bas, comme celle des pages du rapport : la phrase qui tombe,
   et, s'il y en a un, le chiffre en azur pale. Elle suit le contenu a
   l'ecart commun de la fiche (gap), sans marge automatique. */
.om-carte-bande{
  margin:0; padding:18px 20px; border-radius:12px;
  background:rgba(127,176,232,.12); box-shadow:inset 0 0 0 1px rgba(127,176,232,.22);
  font-size:16px; line-height:1.45; color:var(--f-blanc); text-wrap:pretty;
}
.om-carte-bande--chiffre{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.om-carte-bande--chiffre p{ margin:0; }
.om-carte-chiffre{
  flex:none; font-size:38px; line-height:1; font-weight:400; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums; color:var(--om-azur-pale); white-space:nowrap;
}
/* Le chiffre de la restitution, en grand, comme une page de chiffres du rapport */
.om-carte--chiffre{ gap:12px; }
.om-carte-grand{
  margin:4px 0 8px; font-size:136px; line-height:.9; font-weight:400; letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums; color:var(--om-azur-pale);
}
.om-carte--chiffre .om-carte-titre{ max-width:18ch; }

/* =========================================================================
   3 BIS. LA PLANCHE VIVANTE
   Le cadre de l'hote que monte planches.js (offre-mission.js) : il prend la
   place de l'image, avec son rayon et son ombre. L'hote est dessine a
   900 px puis reduit par transform (sauf au telephone) : sa boite garde
   900 px, le cadre la coupe (overflow), et le script lui donne la hauteur
   visible de la planche. Avant le montage, ou s'il echoue, le cadre n'est
   pas dessine et l'image reste.
   ------------------------------------------------------------------------- */
.om-vif{
  display:none; position:relative; overflow:hidden; border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.30);
}
.om-vif-hote{ display:block; width:100%; transform-origin:0 0; }
.om-fig--vif .om-vif{ display:block; }
.om-fig--vif .om-image{ display:none; }

/* Focus : visible sur la bande (azur) comme dans la bulle (Klein). */
.om-mission :focus-visible{ outline:2px solid var(--om-azur); outline-offset:3px; }
.om-mission a:focus-visible{ border-radius:4px; }
.om-bulle :focus-visible{ outline-color:var(--g-klein); }
.om-carte a:focus-visible{ outline-color:var(--om-azur-pale); }

/* =========================================================================
   4. AVEC LE SCRIPT : LES DEPLIANTS
   Un point ouvert : sa bulle blanche, son texte, son illustration. Les
   autres : une ligne sur la bande (numero azur, nom blanc a 86 %), filet
   entre deux. Le texte se deplie par la hauteur de sa grille (0fr a 1fr) ;
   replie, il est aussi masque (visibility) : ni lu, ni atteint au clavier.
   ------------------------------------------------------------------------- */
.om-vivant .om-point{ display:block; }
.om-vivant .om-point + .om-point, .om-vivant .om-groupe + .om-point{ margin-top:0; }
.om-vivant .om-groupe{ margin-top:0; padding:36px 0 14px; }
.om-vivant .om-bulle{
  background:transparent; color:var(--f-blanc); border-radius:20px;
  transition:background-color var(--om-duree) var(--om-courbe);
}
/* Le filet entre deux lignes repliees : un trait droit, en retrait des
   bords (une ombre suivait le rayon de 20 px et dessinait un arc). Il
   s'efface autour de la bulle ouverte. */
.om-vivant .om-bulle{ position:relative; }
.om-vivant .om-point + .om-point .om-bulle::before{
  content:""; position:absolute; left:24px; right:24px; top:0; height:1px;
  background:var(--om-filet); transition:opacity var(--om-duree) var(--om-courbe);
}
.om-vivant .om-point.est-ouvert .om-bulle::before,
.om-vivant .om-point.est-ouvert + .om-point .om-bulle::before{ opacity:0; }
.om-vivant .om-titre{ padding:0; display:block; }
.om-bouton{
  display:grid; grid-template-columns:36px minmax(0, 1fr) 32px; column-gap:8px; align-items:center;
  width:100%; min-height:64px; margin:0; padding:14px 16px 14px 24px;
  border:0; border-radius:20px; background:transparent; cursor:pointer;
  font:inherit; font-size:19px; line-height:1.3; font-weight:500; letter-spacing:-0.015em; text-align:left;
  color:rgba(255,255,255,.86); -webkit-tap-highlight-color:transparent;
  transition:color var(--om-duree) var(--om-courbe), background-color .2s var(--om-courbe);
}
.om-bouton .om-no{ color:var(--om-azur); transition:color var(--om-duree) var(--om-courbe); }
.om-bouton .om-nom{ text-wrap:balance; }
/* Le signe : un plus dans un rond de verre ; ouvert, un moins dans le rond Klein pale. */
.om-signe{
  position:relative; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.10); transition:background-color var(--om-duree) var(--om-courbe);
}
.om-signe::before, .om-signe::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px;
  border-radius:1px; background:var(--f-blanc);
  transition:transform var(--om-duree) var(--om-courbe), background-color var(--om-duree) var(--om-courbe);
}
.om-signe::after{ transform:rotate(90deg); }
@media (hover:hover){
  .om-vivant .om-point:not(.est-ouvert) .om-bouton:hover{ color:var(--f-blanc); background:rgba(255,255,255,.06); }
  .om-vivant .om-point:not(.est-ouvert) .om-bouton:hover .om-signe{ background:rgba(255,255,255,.16); }
}
.om-bouton:active .om-signe{ transform:scale(.92); }

.om-vivant .est-ouvert .om-bulle{ background:var(--f-blanc); color:var(--g-encre); }
.om-vivant .est-ouvert .om-bouton{ color:var(--g-encre); }
.om-vivant .est-ouvert .om-bouton .om-no{ color:var(--g-klein); }
.om-vivant .est-ouvert .om-signe{ background:#e8eefb; }
/* Le moins replie le point (critique 2) : il se signale au survol comme le plus. */
@media (hover:hover){
  .om-vivant .est-ouvert .om-bouton:hover .om-signe{ background:#d6e1f7; }
}
.om-vivant .est-ouvert .om-signe::before, .om-vivant .est-ouvert .om-signe::after{ background:var(--g-klein); }
.om-vivant .est-ouvert .om-signe::after{ transform:rotate(0deg); }
.om-vivant .om-bulle :focus-visible{ outline-color:var(--om-azur); }
.om-vivant .est-ouvert .om-bulle :focus-visible{ outline-color:var(--g-klein); }

.om-vivant .om-texte{
  display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows var(--om-duree) var(--om-courbe), visibility 0s linear var(--om-duree);
}
.om-vivant .om-texte-corps{ min-height:0; overflow:hidden; padding:0 24px 0 68px; }
.om-vivant .om-texte p{ padding:0 0 24px; }
.om-vivant .est-ouvert .om-texte{
  grid-template-rows:1fr; visibility:visible;
  transition:grid-template-rows var(--om-duree) var(--om-courbe), visibility 0s;
}
/* Un point qui se ferme au-dessus de celui que l'on ouvre se replie sans
   transition (.om-net, pose par le script le temps d'une image) : le script
   recale la page de ce qu'il rend, et le point choisi ne bouge pas. */
.om-vivant .om-net .om-texte, .om-vivant .om-net .om-bulle, .om-vivant .om-net .om-bouton,
.om-vivant .om-net .om-bulle::before, .om-vivant .om-net .om-signe,
.om-vivant .om-net .om-signe::before, .om-vivant .om-net .om-signe::after{ transition:none !important; }
/* L'illustration montree seule (.est-montre : celle du point ouvert, ou,
   tout replie, la derniere ouverte) ; les autres restent posees (pour
   garder la hauteur de la colonne) mais invisibles et hors d'atteinte. */
.om-vivant .om-fig{
  opacity:0; visibility:hidden;
  transition:opacity .24s var(--om-courbe), visibility 0s linear .24s;
}
.om-vivant .est-montre .om-fig{ opacity:1; visibility:visible; transition:opacity .24s var(--om-courbe) .06s, visibility 0s; }
/* Tout replie (.om-repos, pose par le script ; jury du 02/10/2026, soir) :
   la figure gardee reste en place, pour que rien ne saute dans la colonne
   collante, mais au repos. Estompee, legende comprise, elle ne se lit plus
   comme le contenu d'un point ouvert ; le script la retire aussi de
   l'accessibilite et du clavier (aria-hidden, inert). Un fondu d'opacite
   seul, sans deplacement ; immediat en mouvement reduit (section 6). Elle
   reprend sa pleine presence des qu'un point s'ouvre. Sans effet en une
   colonne : la figure y est repliee avec son point. */
.om-vivant.om-repos .est-montre .om-fig{ opacity:.45; }
.om-vivant.om-repos .est-montre .om-legende{ opacity:.7; }
.om-vivant .om-legende{ transition:opacity .24s var(--om-courbe); }

/* --- Ordinateur : deux colonnes (au-dela de 1 100 px) --------------------- */
/* La liste devient une grille ; chaque point s'y dissout (display:contents)
   pour que toutes les illustrations partagent la meme case, a droite, sur
   toute la hauteur : elle colle sous la barre pendant que l'on parcourt les
   points. --om-n (pose par le script) compte les lignes de gauche ; la
   derniere rangee, en fr, prend ce que l'illustration a de plus que la
   liste, sans ecarter les lignes, et la hauteur que le script reserve au
   plus long texte (min-height de la liste) : la section ne change plus de
   hauteur d'un point a l'autre. Largeur de l'illustration : 640 px au
   plus, 54 % de la rangee, au moins 440 px laisses aux points (de 1 101 a
   1 200 px, les titres tenaient sinon sur trois lignes), et ce que laisse
   la hauteur de l'ecran (barre et legende comprises) pour que l'extrait le
   plus haut (926 sur 900) tienne en entier sous la barre. */
@media (min-width: 1101px){
  .om-vivant .om-liste{
    display:grid; align-items:start; column-gap:72px;
    grid-template-columns:minmax(0, 1fr) min(640px, 54%, calc(100% - 512px), calc((100vh - 196px) / 1.03));
    grid-template-rows:repeat(var(--om-n, 1), auto) 1fr;
  }
  .om-vivant .om-point{ display:contents; }
  .om-vivant .om-bulle, .om-vivant .om-groupe{ grid-column:1; }
  .om-vivant .om-fig{
    grid-column:2; grid-row:1 / -1; align-self:start;
    position:sticky; top:104px;
  }
}

/* --- Tablette et telephone : une colonne (1 100 px et moins) ------------- */
/* A 1 024, deux colonnes laissaient 394 px aux points (titres sur trois
   lignes) et 510 a l'extrait ; comme le lecteur d'extraits
   (rapport-vitrine.css), tout passe en une colonne. Le point, puis son
   extrait, sous la bulle. Les illustrations repliees ne
   prennent pas de place (display:none) ; le passage d'un point a l'autre
   est immediat, et le script garde le point touche sous le doigt. Tout
   replie, aucune illustration : elle se replie avec son point (le moins
   doit raccourcir la page), quoi que dise .est-montre. */
@media (max-width: 1100px){
  .om-vivant .om-fig{ display:none; opacity:1; visibility:visible; transition:none; }
  .om-vivant .est-ouvert .om-fig{ display:block; margin:20px 0 28px; }
  .om-vivant .om-texte, .om-vivant .om-bulle, .om-vivant .om-bouton, .om-vivant .om-signe,
  .om-vivant .om-signe::before, .om-vivant .om-signe::after{ transition:none; }
}
@media (max-width: 1100px) and (min-width: 761px){
  /* l'en-tete aussi passe en une colonne, comme celui de l'accueil (accueil.css, .f1-contenu-entete) */
  .om-entete{ grid-template-columns:minmax(0, 1fr); gap:24px; align-items:start; }
  .om-point{ grid-template-columns:minmax(0, 1fr); }
  /* L'illustration, centree sous la bulle (jury du 02/10/2026) : tenue a
     640 px et calee a gauche, elle laissait 300 px de marine vide a sa
     droite a 1 024. Elle prend la largeur de la bulle tant que l'extrait le
     plus haut (926 sur 900) tient a l'ecran sous la barre avec sa legende
     (180 px) ; au-dela, elle se resserre et reste au milieu, les deux bords
     egaux, sans descendre sous les 640 px d'avant (en une colonne, rien ne
     colle : l'extrait se lit en defilant). svh : la barre d'adresse des
     tablettes ne compte pas. */
  .om-fig{ width:min(100%, max(640px, calc((100vh - 180px) / 1.03))); margin-left:auto; margin-right:auto; }
  @supports (height:100svh){ .om-fig{ width:min(100%, max(640px, calc((100svh - 180px) / 1.03))); } }
  .om-vivant .est-ouvert .om-fig{ margin:20px auto 28px; }
}

/* =========================================================================
   5. TELEPHONE (393, 320)
   ------------------------------------------------------------------------- */
@media (max-width: 760px){
  /* Audit telephone du 8 octobre (09/10/2026, lot 2, vides) : 56 px en
     haut de la bande et 64 en bas, au lieu de 72 et 80. La section ne
     garde que 48 px de scene sous la bande (offre.css 2). */
  .om-bande{ padding:56px 0 64px; }
  .om-entete{ margin-bottom:28px; gap:16px; }
  .om-point{ grid-template-columns:minmax(0, 1fr); }
  .om-point + .om-point, .om-groupe + .om-point{ margin-top:40px; }
  .om-titre{ grid-template-columns:30px minmax(0, 1fr); padding:18px 18px 0; font-size:17px; }
  /* Au telephone, le texte part du bord de la bulle et non sous le titre :
     a 320, l'alignement sur le titre ne laissait que 206 px a la ligne. */
  .om-texte-corps{ padding:8px 18px 20px; }
  .om-vivant .om-texte-corps{ padding:0 18px; }
  .om-vivant .om-texte p{ padding-bottom:20px; }
  .om-bouton{ grid-template-columns:30px minmax(0, 1fr) 32px; column-gap:8px; min-height:60px; padding:12px 12px 12px 18px; font-size:17px; border-radius:16px; }
  .om-bulle, .om-vivant .om-bulle{ border-radius:16px; }
  .om-texte p{ font-size:16px; }
  .om-legende{ margin-bottom:12px; }
  .om-legende-nom{ font-size:17px; }
  .om-image, .om-vif{ border-radius:10px; box-shadow:0 14px 36px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.30); }
  .om-carte{ padding:22px 18px; gap:16px; border-radius:10px; }
  .om-carte-titre{ font-size:22px; }
  .om-carte-lignes > div{ grid-template-columns:minmax(0, 1fr); row-gap:4px; padding:11px 0; }
  .om-carte-lignes--sens > div{ grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; }
  .om-carte-lignes--sens dd{ font-size:14px; }
  .om-carte-liste li{ padding-left:34px; }
  .om-carte-bande{ padding:16px; }
  .om-carte-bande--chiffre{ flex-direction:column; align-items:flex-start; gap:10px; }
  .om-carte-chiffre{ font-size:34px; }
  .om-carte-grand{ font-size:80px; }
}
@media (max-width: 359px){
  .om-bouton{ padding-left:14px; padding-right:10px; font-size:16px; }
  .om-titre{ padding-left:14px; padding-right:14px; font-size:16px; }
  .om-texte-corps, .om-vivant .om-texte-corps{ padding-left:14px; padding-right:14px; }
  /* les sept retraitements gardent leurs deux colonnes : le nom passe a la
     ligne, le sens reste en face (empiles, ils doublaient la fiche) */
  .om-carte{ padding:20px 16px; }
  .om-carte-lignes--sens dt, .om-carte-lignes--sens dd{ font-size:15px; }
}

/* =========================================================================
   6. MOUVEMENT REDUIT : aucune transition, le changement est immediat.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .om-vivant .om-texte, .om-vivant .om-fig, .om-vivant .est-montre .om-fig, .om-vivant .est-ouvert .om-texte, .om-vivant .om-legende,
  .om-vivant .om-bulle, .om-bouton, .om-bouton .om-no, .om-signe, .om-signe::before, .om-signe::after{
    transition:none !important;
  }
  .om-bouton:active .om-signe{ transform:none; }
}