/**
 * ALM_ORGA_v1 — Page Organisation (blog 1). Chargé UNIQUEMENT sur une page
 * qui porte le bloc alm/organisation. Aucun autre blog, aucune autre page.
 *
 * Aucun hexadécimal n'est écrit dans les règles : tout passe par les jetons
 * déclarés ci-dessous, eux-mêmes branchés sur la palette réelle du thème
 * (assets/css/variables.css) quand un équivalent existe.
 *
 * Correspondances maquette -> charte :
 *   --alm-blue-900  ->  var(--alm-blue-3)     #00264F
 *   --alm-blue-700  ->  var(--alm-blue)       #004899
 *   --alm-sand      ->  var(--alm-gray-100)   #F4F4F0
 *   --alm-ink       ->  var(--alm-gray-900)   #1A1A1A
 *
 * Jetons déclarés ici faute d'équivalent dans la charte (scopés au bloc) :
 *   --o-blue-500  bleu accent (chevron, filet, date d'arrivee)
 *   --o-ink-soft  gris bleuté du texte courant
 *   --o-muted     gris des mentions « Fonction à confirmer »
 *   --o-line      filet des panneaux et des tuiles
 *
 * --o-muted vaut #5E6E7E et NON le #9AA7B4 de la maquette : celui-ci plafonne
 * à 2,45:1 sur blanc et échoue AA. #5E6E7E rend 5,24:1 sur blanc et 4,81:1 sur
 * le sable, en restant nettement plus clair que le texte courant.
 */

/* Tue le décalage horizontal à l'ouverture d'une modale. Cette feuille n'est
   servie que sur la page Organisation : la règle ne sort pas de son périmètre. */
html { scrollbar-gutter: stable; }

.alm-orga {
  /* --- branchés sur la charte --- */
  --o-blue-900: var(--alm-blue-3, #00264F);
  --o-blue-700: var(--alm-blue, #004899);
  --o-sand:     var(--alm-gray-100, #F4F4F0);
  --o-ink:      var(--alm-gray-900, #1A1A1A);

  /* --- déclarés ici, scopés au bloc --- */
  --o-blue-500: #0B6FD0;
  --o-ink-soft: #4A5866;
  --o-muted:    #5E6E7E;
  --o-line:     #DFE5EC;
  --o-white:    #fff;

  --o-r-card:  14px;
  --o-r-panel: 12px;
  --o-sp-2: 1rem;
  --o-sp-3: 1.5rem;
  --o-sp-4: 2.5rem;
  --o-sp-5: 4rem;
  --o-sp-6: 6rem;
  --o-ease: cubic-bezier(.22, .61, .36, 1);
  --o-dur: 200ms;

  color: var(--o-ink);
  line-height: 1.6;
  /* La maquette demande Poppins, qui n'est pas embarquée dans le thème ;
     on hérite donc de la typographie du portail au lieu de retomber en
     silence sur une police système. */
  font-family: var(--font-body, inherit);
}

.alm-orga *,
.alm-orga *::before,
.alm-orga *::after { box-sizing: border-box; }

.alm-orga__wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--o-sp-3); }

.alm-orga__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* Hero                                                              */
/* ---------------------------------------------------------------- */

.alm-orga__hero {
  background: linear-gradient(115deg, var(--o-blue-900), var(--o-blue-700));
  color: var(--o-white);
  padding: var(--o-sp-6) 0 var(--o-sp-5);
}
.alm-orga__h1 {
  font-family: var(--font-title, inherit);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.1; margin: 0 0 var(--o-sp-2);
  font-weight: 600; letter-spacing: -.01em; color: var(--o-white);
}
.alm-orga__lead {
  margin: 0; max-width: 52ch;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  /* #D8E6F6 sur le dégradé : 6,95:1 au point le plus clair. */
  color: #D8E6F6; line-height: 1.5;
}
.alm-orga-js .alm-orga__h1   { animation: alm-orga-in .5s var(--o-ease) both; }
.alm-orga-js .alm-orga__lead { animation: alm-orga-in .5s var(--o-ease) both; animation-delay: 90ms; }
@keyframes alm-orga-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- */
/* Sections                                                          */
/* ---------------------------------------------------------------- */

.alm-orga__sec { padding: var(--o-sp-6) 0; }
.alm-orga__sec--pres,
.alm-orga__sec--dm { background: var(--o-sand); }

.alm-orga__shead { margin: 0 0 var(--o-sp-4); }
.alm-orga__shead h2 {
  font-family: var(--font-title, inherit);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--o-blue-700); margin: 0; font-weight: 600; letter-spacing: -.01em;
}

/* ---------------------------------------------------------------- */
/* Présidence                                                        */
/* ---------------------------------------------------------------- */

.alm-orga__pres {
  display: grid; grid-template-columns: minmax(240px, 340px) 1fr;
  gap: var(--o-sp-5); align-items: start;
}
.alm-orga__presph { position: relative; }
.alm-orga__presimg {
  display: block; border-radius: var(--o-r-card); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--o-blue-900);
}
.alm-orga__presimg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 320ms var(--o-ease);
}
.alm-orga__presph:hover .alm-orga__presimg img { transform: scale(1.03); }
.alm-orga__presimg--vide {
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--o-blue-700), var(--o-blue-900));
}

.alm-orga__presname {
  font-family: var(--font-title, inherit);
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600;
  color: var(--o-blue-900); margin: 0;
}
.alm-orga__presrole { margin: .25rem 0 var(--o-sp-3); color: var(--o-ink-soft); font-size: 1.05rem; }
.alm-orga__quote {
  margin: 0 0 var(--o-sp-3); padding-left: var(--o-sp-3);
  border-left: 3px solid var(--o-blue-500);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1.45;
  color: var(--o-blue-900); font-weight: 500;
}
.alm-orga__presbio p { margin: 0 0 var(--o-sp-2); max-width: 68ch; color: var(--o-ink-soft); }
.alm-orga__presbio p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- */
/* Badge LinkedIn — frère du bouton, au-dessus de sa surface          */
/* ---------------------------------------------------------------- */

.alm-orga .alm-orga__li {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--o-blue-700); text-decoration: none;
  /* Le liseré intérieur et l'ombre portée : sans eux le badge disparaît
     sur une photo claire. */
  box-shadow: 0 2px 10px rgba(0, 20, 45, .35),
              0 0 0 1px rgba(255, 255, 255, .22) inset;
  transition: background var(--o-dur) var(--o-ease),
              transform var(--o-dur) var(--o-ease),
              box-shadow var(--o-dur) var(--o-ease);
}
.alm-orga .alm-orga__li svg { width: 19px; height: 19px; fill: var(--o-white); display: block; }
.alm-orga .alm-orga__li:hover,
.alm-orga .alm-orga__li:focus-visible {
  background: var(--o-blue-900); transform: scale(1.09);
  box-shadow: 0 6px 16px rgba(0, 20, 45, .42);
}
.alm-orga .alm-orga__li:active { transform: scale(1.02); }
.alm-orga .alm-orga__li:focus-visible { outline: 2px solid var(--o-white); outline-offset: 3px; }

/* ---------------------------------------------------------------- */
/* Équipe dirigeante — grille de cartes                              */
/* ---------------------------------------------------------------- */

.alm-orga__grid {
  display: grid;
  /* minmax(0,1fr) et NON 1fr. `1fr` vaut `minmax(auto,1fr)` : le plancher
     d une colonne est alors le min-content de son contenu. Le media porte
     aspect-ratio 4/5 ; des que sa hauteur est contrainte (grid-auto-rows:1fr),
     le ratio resout HAUTEUR -> LARGEUR, et cette largeur devient le plancher
     de la colonne. Mesure du 2026-08-28 : des panneaux de 1, 2 et 3 lignes
     donnaient des colonnes de 361, 314, 190 et 274 px. minmax(0,1fr) supprime
     le plancher : les colonnes sont egales et le ratio resout LARGEUR -> HAUTEUR. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Hauteurs uniformes : sans 1fr, une fonction sur deux lignes ou une date
     d'arrivée présente désaligne le bas des cartes. */
  grid-auto-rows: 1fr; gap: var(--o-sp-3);
  margin: 0; padding: 0; align-items: stretch;
}
.alm-orga__card { position: relative; display: flex; }

.alm-orga__cardbtn {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  text-align: left; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  /* reset.css de hello-elementor (theme parent) pose white-space:nowrap sur
     `button, [type=button], [type=submit]`. La carte ET la tuile SONT des
     boutons : sans cette remise a zero, « Directrice de la Strategie et de la
     Transformation » tient sur une seule ligne et deborde du panneau.
     Mesure du 2026-08-28 : scrollWidth 327 px pour clientWidth 230 px.
     On neutralise dans NOTRE perimetre, on ne touche pas reset.css. */
  white-space: normal;
}
/* Surface cliquable : elle passe SOUS le badge (z-index 1 contre 3). */
.alm-orga__cardbtn::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.alm-orga__media {
  display: block; flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--o-r-card); overflow: hidden; background: var(--o-blue-900);
  box-shadow: 0 1px 2px rgba(0, 48, 95, .08);
  transition: box-shadow var(--o-dur) var(--o-ease);
}
.alm-orga__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--o-dur) var(--o-ease);
}
/* Pastille a initiales, carte et modale.

   `.alm-orga__mmedia` est DOUBLEMENT qualifiee — pas par gout, par necessite.
   `.alm-orga__mmedia { display: block }` est declaree plus bas (section
   « Modales ») a specificite EGALE : a egalite, la derniere servie gagne, et
   la boite reprenait `display: block`. `place-items` n'a alors plus de prise
   et les initiales se collaient en haut a gauche — mesure du 2026-08-31 :
   -126 px en horizontal, -166 px en vertical a 1440, sur les 10 fiches sans
   photo. L'element porte reellement les deux classes (alm_orga_portrait(),
   la modale generique statique et son remplissage JS les posent toutes les
   deux) : la double qualification decrit ce qui existe, elle ne gonfle rien.
   Elle rend la regle independante de l'ordre — ajouter demain une regle
   `.alm-orga__mmedia` ne rouvrira pas le defaut.

   `.alm-orga__media--vide` (carte) reste simple : `.alm-orga__media` est
   declaree JUSTE AU-DESSUS, l'ordre la fait deja gagner, et la carte est
   mesuree centree (0/0). On ne touche pas a une regle qui tient. */
.alm-orga__media--vide,
.alm-orga__mmedia.alm-orga__mmedia--vide {
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--o-blue-700), var(--o-blue-900));
}
.alm-orga__ini {
  font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600;
  color: var(--o-white); letter-spacing: .06em; opacity: .92;
}

.alm-orga__panel {
  position: relative; display: block; flex: 1 1 auto;
  margin-top: -3.25rem; width: calc(100% - 1rem);
  background: var(--o-white); border: 1px solid var(--o-line);
  border-radius: var(--o-r-panel); padding: var(--o-sp-2);
  box-shadow: 0 6px 18px rgba(0, 48, 95, .07);
  transition: box-shadow var(--o-dur) var(--o-ease),
              transform var(--o-dur) var(--o-ease),
              border-color var(--o-dur) var(--o-ease);
}
.alm-orga__head { display: flex; align-items: center; gap: .5rem; color: var(--o-blue-900); }
.alm-orga__name {
  font-weight: 600; font-size: 1rem; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.25;
}
.alm-orga__role {
  display: block; margin: .35rem 0 0; font-size: .92rem;
  color: var(--o-ink-soft); line-height: 1.4;
}
.alm-orga__role--todo { color: var(--o-muted); font-style: italic; }
.alm-orga__meta {
  display: block; margin: .35rem 0 0; font-size: .82rem;
  color: var(--o-blue-500); font-weight: 500;
}

.alm-orga__chev {
  flex: 0 0 20px; width: 20px; height: 20px; margin-left: auto;
  fill: none; stroke: var(--o-blue-500); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--o-dur) var(--o-ease);
}

.alm-orga__cardbtn:hover .alm-orga__panel,
.alm-orga__cardbtn:focus-visible .alm-orga__panel {
  box-shadow: 0 14px 30px rgba(0, 48, 95, .15);
  transform: translateY(-4px); border-color: #C6D6E8;
}
.alm-orga__cardbtn:hover .alm-orga__media { box-shadow: 0 10px 24px rgba(0, 48, 95, .16); }
.alm-orga__cardbtn:hover .alm-orga__media img { transform: scale(1.045); }
.alm-orga__cardbtn:hover .alm-orga__chev { transform: translateX(4px); }
.alm-orga__cardbtn:active .alm-orga__panel { transform: translateY(-1px); transition-duration: 80ms; }
.alm-orga__cardbtn:focus-visible {
  outline: 2px solid var(--o-blue-500); outline-offset: 4px; border-radius: var(--o-r-card);
}

/* ---------------------------------------------------------------- */
/* Direction et management — tuiles                                  */
/* ---------------------------------------------------------------- */

.alm-orga__sec--dm h3 {
  font-family: var(--font-title, inherit);
  font-size: 1.25rem; color: var(--o-blue-900);
  margin: var(--o-sp-4) 0 var(--o-sp-2); font-weight: 600;
}
.alm-orga__sec--dm h3:first-of-type { margin-top: 0; }
.alm-orga__vide { margin: 0 0 var(--o-sp-2); color: var(--o-muted); font-style: italic; }

.alm-orga__tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: var(--o-sp-2);
  list-style: none; margin: 0; padding: 0;
}
.alm-orga__tile { display: flex; }
.alm-orga__tilebtn {
  /* Rangee : vignette a gauche, texte a droite. `align-items: flex-start`
     et non `stretch` : le cercle doit garder ses 40 px de haut, pas
     s'etirer sur la hauteur du texte. */
  display: flex; align-items: flex-start; gap: .75rem;
  width: 100%; text-align: left; font: inherit;
  color: inherit; cursor: pointer; background: var(--o-white);
  white-space: normal;   /* meme reset hello-elementor que la carte */
  border: 1px solid var(--o-line); border-left: 3px solid var(--o-blue-500);
  border-radius: var(--o-r-panel); padding: var(--o-sp-2);
  transition: transform var(--o-dur) var(--o-ease),
              box-shadow var(--o-dur) var(--o-ease),
              border-left-color var(--o-dur) var(--o-ease);
}

/* Vignette ronde de 40 px — meme motif que .alm-pann-card__avatar de
   l'annuaire praticiens du portail, a l'echelle de la tuile.
   `flex: 0 0 40px` ET `width: 40px` : sans la base fixe, un nom long
   comprime le cercle en ovale. */
.alm-orga__tileav {
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--o-blue-700), var(--o-blue-900));
}
.alm-orga__tileav img {
  width: 40px; height: 40px; object-fit: cover; display: block;
}
.alm-orga__tileini {
  color: var(--o-white); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; opacity: .95;
}

/* min-width:0 : sans lui le plancher min-content d'un flex item empeche
   « Directeur des Systemes d'Information » de se couper, et le texte
   deborde la tuile au lieu de passer a la ligne. */
.alm-orga__tiletxt { flex: 1 1 auto; min-width: 0; }

.alm-orga__tilehead { display: flex; align-items: center; gap: .5rem; }
.alm-orga__tilename {
  font-weight: 600; font-size: .95rem; color: var(--o-blue-900);
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.3;
}
.alm-orga__tilerole {
  display: block; margin: .3rem 0 0; font-size: .88rem;
  color: var(--o-ink-soft); line-height: 1.4;
}
.alm-orga__tilebtn:hover {
  transform: translateX(3px); box-shadow: 0 10px 22px rgba(0, 48, 95, .10);
  border-left-color: var(--o-blue-900);
}
.alm-orga__tilebtn:hover .alm-orga__chev { transform: translateX(4px); }
.alm-orga__tilebtn:active { transform: translateX(1px); transition-duration: 80ms; }
.alm-orga__tilebtn:focus-visible { outline: 2px solid var(--o-blue-500); outline-offset: 3px; }

/* ---------------------------------------------------------------- */
/* Direction et management — variante « grandes tuiles photo »       */
/* ---------------------------------------------------------------- */

/* OPT-IN, ET CLAVETÉ. Chaque règle de ce bloc commence par
   `.alm-orga__sec--dmcartes`, posée par alm_orga_section_management() et par
   rien d'autre. Cette feuille est COMMUNE aux trois sections : c'est la seule
   chose qui garantit qu'aucune règle d'ici ne peut atteindre « L'équipe
   dirigeante » ni « La présidence », qui ne portent pas la classe. Retirer le
   modificateur suffit à revenir au dessin en rangée, sans toucher à la feuille.

   Les classes de structure `.alm-orga__tile` et `.alm-orga__tilebtn` restent
   partagées avec ce dessin d'origine (des instruments de mesure les
   interrogent — voir rendu.php). Toute règle qui les vise est donc préfixée du
   modificateur : elle pèse (0,2,x) contre (0,1,x) et gagne sans `!important`
   et SANS DÉPENDRE DE L'ORDRE des déclarations. */

/* Les colonnes restent en minmax(0,1fr), héritées de `.alm-orga__tiles` : le
   média porte aspect-ratio 4/5, et `1fr` (= minmax(auto,1fr)) lui rendrait un
   plancher min-content — exactement le défaut mesuré sur la grille des
   cartes. Seule la gouttière change, pour celle des cartes. */
.alm-orga__sec--dmcartes .alm-orga__tiles { gap: var(--o-sp-3); }

/* `position: relative` : la pastille LinkedIn se pose en `absolute` dans le
   référentiel de la tuile, comme elle le fait déjà dans celui de la carte. */
.alm-orga__sec--dmcartes .alm-orga__tile { position: relative; display: flex; }

.alm-orga__sec--dmcartes .alm-orga__tilebtn {
  /* La rangée redevient une colonne. Le bouton perd fond, bordure et padding :
     c'est l'encart blanc qui les porte désormais. `padding: 0` n'est pas
     cosmétique — reset.css de hello-elementor impose `padding: 8px 16px` sur
     `button`, et la tuile d'origine s'appuyait dessus. */
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: 100%; height: 100%;
  background: none; border: 0; border-radius: 0; padding: 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  /* Même reset que la carte : hello-elementor pose `white-space: nowrap` sur
     `button`. Sans cette remise à zéro, « Directrice Qualité et Gestion des
     Risques » tient sur une seule ligne et déborde l'encart. */
  white-space: normal;
  transition: none;
}
/* Surface cliquable : elle passe SOUS le badge (z-index 1 contre 3). */
.alm-orga__sec--dmcartes .alm-orga__tilebtn::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* Le survol de la tuile en rangée — translateX, ombre, filet bleu à gauche —
   n'a plus d'objet : il est repris par l'encart, plus bas. */
.alm-orga__sec--dmcartes .alm-orga__tilebtn:hover,
.alm-orga__sec--dmcartes .alm-orga__tilebtn:active {
  transform: none; box-shadow: none;
}

/* Média 4/5, aux valeurs de `.alm-orga__media`. */
.alm-orga__sec--dmcartes .alm-orga__dmmedia {
  display: block; flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--o-r-card); overflow: hidden; background: var(--o-blue-900);
  box-shadow: 0 1px 2px rgba(0, 48, 95, .08);
  transition: box-shadow var(--o-dur) var(--o-ease);
}
.alm-orga__sec--dmcartes .alm-orga__dmmedia img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--o-dur) var(--o-ease);
}
/* Monogramme de repli — le cas MAJORITAIRE ici, pas l'exception : 15 des 16
   fiches de la section n'ont aucune photo en base.
   Doublement qualifié à dessein : la variante pleine est déclarée juste
   au-dessus, à spécificité égale, et la dernière servie gagnerait. La double
   classe rend la règle indépendante de l'ordre — c'est le défaut déjà payé
   sur `.alm-orga__mmedia`. */
.alm-orga__sec--dmcartes .alm-orga__dmmedia.alm-orga__dmmedia--vide {
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--o-blue-700), var(--o-blue-900));
}

/* Encart blanc, remonté sur le média — valeurs de `.alm-orga__panel`. */
.alm-orga__sec--dmcartes .alm-orga__dmpanel {
  position: relative; display: block; flex: 1 1 auto;
  margin-top: -3.25rem; width: calc(100% - 1rem);
  background: var(--o-white); border: 1px solid var(--o-line);
  border-radius: var(--o-r-panel); padding: var(--o-sp-2);
  box-shadow: 0 6px 18px rgba(0, 48, 95, .07);
  transition: box-shadow var(--o-dur) var(--o-ease),
              transform var(--o-dur) var(--o-ease),
              border-color var(--o-dur) var(--o-ease);
}
.alm-orga__sec--dmcartes .alm-orga__dmhead {
  display: flex; align-items: center; gap: .5rem; color: var(--o-blue-900);
}
.alm-orga__sec--dmcartes .alm-orga__dmname {
  font-weight: 600; font-size: 1rem; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.25;
}
.alm-orga__sec--dmcartes .alm-orga__dmrole {
  display: block; margin: .35rem 0 0; font-size: .92rem;
  color: var(--o-ink-soft); line-height: 1.4;
}
/* `.alm-orga__role--todo` pèse (0,1,0). Sans cette reprise, la couleur
   ci-dessus (0,2,0) l'emporterait et « Fonction à confirmer » perdrait son
   gris italique. Les deux fiches Canada sont exactement dans ce cas. */
.alm-orga__sec--dmcartes .alm-orga__dmrole.alm-orga__role--todo {
  color: var(--o-muted); font-style: italic;
}
.alm-orga__sec--dmcartes .alm-orga__dmmeta {
  display: block; margin: .35rem 0 0; font-size: .82rem;
  color: var(--o-blue-500); font-weight: 500;
}

.alm-orga__sec--dmcartes .alm-orga__tilebtn:hover .alm-orga__dmpanel,
.alm-orga__sec--dmcartes .alm-orga__tilebtn:focus-visible .alm-orga__dmpanel {
  box-shadow: 0 14px 30px rgba(0, 48, 95, .15);
  transform: translateY(-4px); border-color: #C6D6E8;
}
.alm-orga__sec--dmcartes .alm-orga__tilebtn:hover .alm-orga__dmmedia {
  box-shadow: 0 10px 24px rgba(0, 48, 95, .16);
}
.alm-orga__sec--dmcartes .alm-orga__tilebtn:hover .alm-orga__dmmedia img {
  transform: scale(1.045);
}
.alm-orga__sec--dmcartes .alm-orga__tilebtn:hover .alm-orga__chev {
  transform: translateX(4px);
}
.alm-orga__sec--dmcartes .alm-orga__tilebtn:active .alm-orga__dmpanel {
  transform: translateY(-1px); transition-duration: 80ms;
}
.alm-orga__sec--dmcartes .alm-orga__tilebtn:focus-visible {
  outline: 2px solid var(--o-blue-500); outline-offset: 4px;
  border-radius: var(--o-r-card);
}

/* Colonne unique : la gouttière des cartes, pas celle des rangées. Placé ici
   et non avec les autres @media parce que la spécificité, pas l'ordre, règle
   la question — le modificateur pèse (0,2,0) contre (0,1,0). Le nombre de
   colonnes reste piloté par `.alm-orga__tiles` : 4, puis 3, 2 et 1. */
@media (max-width: 560px) {
  .alm-orga__sec--dmcartes .alm-orga__tiles { gap: var(--o-sp-4); }
}

/* ---------------------------------------------------------------- */
/* Modales                                                           */
/* ---------------------------------------------------------------- */

.alm-orga__modal {
  border: 0; padding: 0; background: transparent;
  max-width: min(880px, 92vw); width: 100%; max-height: 88vh;
  overflow: visible; color: var(--o-ink);
  font-family: var(--font-body, inherit); line-height: 1.6;
}
.alm-orga__modal::backdrop { background: rgba(0, 20, 45, .55); backdrop-filter: blur(2px); }
.alm-orga__minner {
  position: relative; background: var(--o-white); border-radius: var(--o-r-card);
  max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.alm-orga__mgrid {
  display: grid; grid-template-columns: minmax(180px, 270px) 1fr;
  gap: var(--o-sp-4); padding: var(--o-sp-4);
}
.alm-orga__modal--slim .alm-orga__mgrid {
  grid-template-columns: minmax(140px, 190px) 1fr; align-items: center;
}
.alm-orga__mmedia {
  display: block; border-radius: var(--o-r-panel); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--o-blue-900); align-self: start;
}
.alm-orga__mmedia img { width: 100%; height: 100%; object-fit: cover; display: block; }

.alm-orga__mname {
  font-family: var(--font-title, inherit);
  margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem);
  color: var(--o-blue-900); font-weight: 600;
}
.alm-orga__mrole { margin: .2rem 0 0; color: var(--o-ink-soft); font-size: 1.02rem; }
.alm-orga__mmeta { margin: .4rem 0 var(--o-sp-3); color: var(--o-blue-500); font-size: .86rem; font-weight: 500; }
.alm-orga__mbody p { margin: 0 0 .9rem; color: var(--o-ink-soft); font-size: .95rem; }
.alm-orga__mbody p:last-child { margin-bottom: 0; }

.alm-orga__mli { margin: .5rem 0 0; }
/* Spécificité volontairement haute : portail.css porte un survol orange
   générique sur `a` qui gagnerait à égalité. */
.alm-orga .alm-orga__mli a {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--o-blue-700); text-decoration: none;
  font-size: .9rem; font-weight: 500;
  transition: color var(--o-dur) var(--o-ease);
}
.alm-orga .alm-orga__mli a svg { width: 16px; height: 16px; fill: currentColor; }
.alm-orga .alm-orga__mli a:hover { color: var(--o-blue-900); text-decoration: underline; }
.alm-orga .alm-orga__mli a:focus-visible { outline: 2px solid var(--o-blue-500); outline-offset: 2px; }

/* Croix de fermeture.
 *
 * Positionnee en ABSOLUTE par rapport au <dialog>, pas au panneau interne :
 * c'est `.alm-orga__minner` qui porte `overflow-y:auto`, le bouton y defilait
 * avec la biographie. Le <dialog> est deja positionne par le navigateur
 * (position:fixed pour un dialogue modal) : il sert donc de reference sans
 * qu'on ait a le repositionner nous-memes. Plus de float, plus de sticky.
 *
 * L'HERITAGE EST NEUTRALISE ICI. reset.css de hello-elementor impose
 * `padding: 8px 16px` sur `button` — mesure du 2026-08-28. Avec
 * `display:grid; place-items:center`, la boite de contenu tombait a 10 px de
 * large, la piste de grille debordait vers la droite et le glyphe se posait
 * 4 px a droite du centre. On remet donc padding, marge, line-height,
 * font-size, appearance et float a zero avant de centrer.
 */
.alm-orga .alm-orga__mx {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 40px; height: 40px;

  /* remise a zero de l'heritage du theme parent */
  padding: 0; margin: 0; line-height: 0; font-size: 0;
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; float: none; white-space: normal;

  /* centrage par flex, pas par grid : aucune piste ne peut deborder */
  display: inline-flex; align-items: center; justify-content: center;

  border: 1px solid var(--o-line); background: var(--o-white);
  border-radius: 50%; cursor: pointer;
  transition: background var(--o-dur) var(--o-ease);
}

/* Cible tactile 44x44 pour un cercle VISIBLE de 40, sans toucher au dessin.
 *
 * `inset` se resout contre la boite de PADDING du bouton, pas sa boite de
 * bordure : 40 - 2x1 de bordure = 38. Il faut donc -3px pour obtenir 44, pas
 * -2px (qui ne donnait que 42 — mesure du 2026-08-28 : 2 points sur 8 captes).
 *
 * Et la zone reste CARREE : le critere des 44x44 se mesure sur la boite
 * englobante. Un disque de 44 de diametre laisse ses quatre coins hors cible.
 */
.alm-orga .alm-orga__mx::before {
  content: ""; position: absolute; inset: -3px; border-radius: 0;
}

.alm-orga .alm-orga__mx svg {
  display: block;            /* jamais inline : un svg inline s'assoit sur la
                                ligne de base et descend de quelques pixels */
  width: 16px; height: 16px;
  fill: none; stroke: var(--o-blue-900);
  stroke-width: 2; stroke-linecap: round;
}
.alm-orga .alm-orga__mx:hover { background: var(--o-sand); }
.alm-orga .alm-orga__mx:focus-visible { outline: 2px solid var(--o-blue-500); outline-offset: 2px; }

/* Le titre ne passe jamais sous la croix. */
.alm-orga__mname { padding-right: 44px; }

.alm-orga__modal[open] { animation: alm-orga-min 180ms var(--o-ease); }
@keyframes alm-orga-min { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- */
/* Entrée à l'écran                                                  */
/* ---------------------------------------------------------------- */

/* L'état initial n'existe QUE si le JS a posé .alm-orga-js sur <html>. */
.alm-orga-js [data-alm-orga-reveal] {
  opacity: 0; transform: translateY(20px); will-change: opacity, transform;
}
.alm-orga-js [data-alm-orga-reveal].is-in {
  opacity: 1; transform: none; will-change: auto;
  transition: opacity .42s var(--o-ease), transform .42s var(--o-ease);
  transition-delay: calc(var(--alm-orga-i, 0) * 55ms);
}

/* ---------------------------------------------------------------- */
/* Points de rupture — 1180 / 900 / 640 / 560                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1180px) {
  .alm-orga__grid, .alm-orga__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .alm-orga__pres { grid-template-columns: 1fr; gap: var(--o-sp-3); }
  .alm-orga__presph { max-width: 280px; }
  .alm-orga__grid, .alm-orga__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .alm-orga__modal {
    max-width: 100vw; width: 100vw; max-height: 100dvh; margin: auto 0 0;
  }
  .alm-orga__minner { border-radius: 16px 16px 0 0; max-height: 92dvh; }
  .alm-orga__mgrid,
  .alm-orga__modal--slim .alm-orga__mgrid {
    grid-template-columns: 1fr; gap: var(--o-sp-3); padding: var(--o-sp-3);
  }
  .alm-orga__mmedia { max-width: 180px; }
  /* Colonne unique : le titre passe SOUS la photo, loin de la croix.
     La reserve de 44 px n a plus lieu d etre et couperait le nom trop tot. */
  .alm-orga__mname { padding-right: 0; }
}

@media (max-width: 560px) {
  .alm-orga .alm-orga__li { width: 36px; height: 36px; top: 14px; left: 14px; }
  .alm-orga .alm-orga__li svg { width: 18px; height: 18px; }
  .alm-orga__sec { padding: var(--o-sp-5) 0; }
  .alm-orga__grid { grid-template-columns: 1fr; gap: var(--o-sp-4); }
  .alm-orga__tiles { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Mouvement réduit — y compris l'état initial                       */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .alm-orga *,
  .alm-orga__modal * { transition: none !important; animation: none !important; }
  .alm-orga-js [data-alm-orga-reveal] { opacity: 1 !important; transform: none !important; }
  .alm-orga-js .alm-orga__h1,
  .alm-orga-js .alm-orga__lead { animation: none !important; opacity: 1 !important; }
}