/* V5, livraison 1a : contenus et retouches statiques. Le comparateur reste en 1b. */

/* Le siège et l'email disposent d'une vraie colonne, sans fractionner les mots. */
.pied__colonnes {
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(252px, 1.35fr);
}

.pied__colonne {
  padding-inline: 16px;
}

.pied__colonne:first-child {
  padding-left: 0;
}

.pied .pied__colonne--contact {
  padding-right: 0;
  padding-left: 20px;
}

.pied__contact li {
  gap: 12px;
}

.pied__contact li > :is(a, div) {
  overflow-wrap: normal;
  word-break: normal;
}

.pied__contact a[href^="mailto:"] {
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .pied__colonnes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pied .pied__colonne--contact {
    grid-column: 1 / -1;
    padding: 0;
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .pied__colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pied__colonne {
    padding: 0;
  }
}

/* Trois associés, fonctions claires sur le bandeau sombre conservé. */
[data-page="a-propos"] .grille--equipe {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  [data-page="a-propos"] .grille--equipe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  [data-page="a-propos"] .grille--equipe .membre__photo {
    aspect-ratio: 4 / 3.15;
  }
}

[data-page="a-propos"] .membre__bandeau .texte-carte {
  color: #E7EBF5;
}

/* Les teintes déjà choisies coulent lentement ; filtres et lueurs restent en place.
   Le reflet rapide des anciens .degrade laisse place au dégradé seul. */
#contenu .degrade {
  background-image: var(--degrade-accent);
}

#contenu :is(.section--clair, .section--blanc, .section--legal) .degrade {
  background-image: var(--degrade-accent-clair);
}

#contenu .hero__carte :is(h4, .h4) {
  background-image: linear-gradient(90deg, #8be9ff, #b8b1ff 55%, #f2a8ff);
}

#contenu :is(.degrade,
  :is(.carte--solution, .carte--valeur, .carte--engagement, .carte--agent, .carte--outil,
    .carte--generative, .benefice, .mission__point, .hero__carte) :is(h3, h4, .h4),
  .etape__texte > h3) {
  background-size: 200% 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  #contenu :is(.degrade,
    :is(.carte--solution, .carte--valeur, .carte--engagement, .carte--agent, .carte--outil,
      .carte--generative, .benefice, .mission__point, .hero__carte) :is(h3, h4, .h4),
    .etape__texte > h3) {
    animation: v5-couleurs 30s ease-in-out infinite alternate;
  }
}

@keyframes v5-couleurs {
  from { background-position: 10% 0; }
  to { background-position: 90% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #contenu :is(.degrade,
    :is(.carte--solution, .carte--valeur, .carte--engagement, .carte--agent, .carte--outil,
      .carte--generative, .benefice, .mission__point, .hero__carte) :is(h3, h4, .h4),
    .etape__texte > h3) {
    animation: none;
  }
}

/* Le clavier bénéficie de la même pause que le survol, y compris le flottement. */
.logos-defile:focus-within :is(.logos--defile, .logo-client) {
  animation-play-state: paused;
}

.logos-defile:focus-within {
  -webkit-mask-image: none;
  mask-image: none;
}

.logos-defile .logo-client:focus-visible {
  outline: 3px solid #075BFF;
  outline-offset: 3px;
}

/* Cartes blanches (choix d'Anthony, figé dans la V6) : seules les familles devenues noires dans le bloc V4 changent. */
html:root :is(.section--clair, .section--blanc) :is(.carte--engagement, .carte--solution, .carte--agent, .carte--generative, .benefice, .chiffre-bloc) {
  --b-fond-bloc: #FFFFFF;
  --fond-section: #FFFFFF;
  color: #3A4466;
}
html:root :is(.section--clair, .section--blanc) :is(.carte--engagement, .carte--solution, .carte--agent, .carte--generative, .benefice, .chiffre-bloc) :is(p, .texte-carte, .sous-titre-carte, .leger, li) { color: #3A4466; }
html:root :is(.section--clair, .section--blanc) :is(.carte--engagement, .carte--solution, .carte--agent, .carte--generative, .benefice, .chiffre-bloc) :is(h3, h4, .h4) { background-image: var(--degrade-accent-clair); }
html:root :is(.section--clair, .section--blanc) .carte--solution > .fleche { --fond-section: #FFFFFF; color: #0B1450; }

/* Une place réservée sous le pied, y compris au bas d'un vrai écran de téléphone : celle des outils fixes de la V5,
   gardée telle quelle (la V6 rend la même page ; la bulle Nova reste posée en bas de l'écran). */
html:root .pied { padding-bottom: calc(164px + env(safe-area-inset-bottom)); }

@media(max-width:767px) {
  html:root body .apercu-avatar { width: 48px; height: 48px; padding: 8px; gap: 0; }
  html:root body .apercu-avatar__textes { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html:root .entete::before { animation: v5-menu-zoom 32s ease-in-out var(--v5-zoom-retard, 0ms) infinite alternate; }
}
@keyframes v5-menu-zoom { from { background-size: 100% 100%, 105% auto; } to { background-size: 100% 100%, 120% auto; } }
@media (prefers-reduced-motion: reduce) {
  html:root .entete::before { animation: none; }
}


/* T10 — coordonnées compactes centrées ; les mentions desktop restent à droite. */
@media (max-width: 767px) {
  .pied .pied__contact { width: 100%; }
  .pied .pied__contact li { justify-content: center; text-align: center; }
  .pied .pied__contact li :is(p, a, div) { text-align: center; }
}

/* T10 — rangs partagés : le contenu détermine les hauteurs, sans texte tronqué. */
@media (min-width: 1200px) {
  [data-page="formations"] .section .conteneur > .grille.grille--formations { grid-auto-rows: auto; row-gap: 0; }
  [data-page="formations"] .grille--formations > .carte--formation {
    display: grid; grid-row: span 10; grid-template-rows: subgrid; row-gap: 0;
  }
  [data-page="formations"] .grille--formations .carte__corps {
    display: grid; grid-row: 2 / span 9; grid-template-rows: subgrid; row-gap: 0;
  }
  [data-page="formations"] .grille--formations .puces {
    grid-row: 4 / span 5; grid-template-rows: subgrid; row-gap: 11px;
  }
  [data-page="formations"] .grille--formations .boutons { grid-row: 9; margin-top: 0; }
}
@media (max-width: 1199px) {
  [data-page="formations"] .grille--formations { align-items: start; }
  [data-page="formations"] .grille--formations > .carte--formation { align-self: start; }
  [data-page="formations"] .grille--formations .carte__corps { flex-grow: 0; }
}

/* Point source (556,142)/960×320 au centre ; réserve de crop sur les deux axes.
   120% en largeur et 114% en hauteur suffisent à couvrir le cadre après ancrage. */
[data-page="formations"] .carte--formation .carte__media { height: 220px; }
[data-page="formations"] .carte__recadrage { position: absolute; inset: 0; container-type: size; overflow: clip; }
[data-page="formations"] .carte--formation[data-bloc="1"] .carte__image {
  position: absolute; width: max(120cqw, 342cqh); height: max(40cqw, 114cqh);
  max-width: none; left: 50%; top: 50%; object-position: 50% 50%;
  transform: translate(-57.916667%, -44.375%);
}
@media (max-width: 1199px) {
  [data-page="formations"] .carte--formation .carte__media { height: 180px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  [data-page="formations"] .carte--formation .carte__media { height: 200px; }
}
[data-page="formations"] img[src*="formations-sensibilisation-atelier-v5"],
[data-page="formations"] img[src*="formations-sur-mesure-trio-v5"] { object-position: 50% 50%; }

/* Revue du 30/10 (choix C « fondu tout en bas de la photo ») : le fondu vers le bandeau du nom commençait à la
   moitié de la photo et cachait les mentons ; il ne prend plus que le bas de la photo. */
[data-page="a-propos"] .membre__photo:not(.membre__attente)::after {
  background-image: linear-gradient(180deg, rgba(1,12,31,0) 80%, rgba(1,12,31,.15) 86%, rgba(1,12,31,.5) 93%, #010C1F 100%);
}

/* Anthony demeure le repère ; seuls les deux autres portraits sont recadrés.
   La petite réserve de 10% couvre le bas après déplacement, sans changer le cadre. */
[data-page="a-propos"] .membre__photo:has(img[src*="portrait-michael"] ) img,
[data-page="a-propos"] .membre__photo:has(img[src*="portrait-thomas"] ) img {
  position: absolute; width: 110%; height: 110%; max-width: none; left: -5%; top: -9%;
  object-position: 50% 50%;
}

/* Haut de Formations (revue du 30/10, choix C « fondu long, comme les autres pages ») : la densité reste sous le
   titre jusqu'à sa fin (≈ 50 % + 80 px, à toutes les largeurs : à 1200 px, un repère en pourcentage laissait la fin
   du titre à un contraste de 2,7), puis un fondu sans cassure (smoothstep) s'éteint 280 px plus loin, vers 75 % à
   1440 px comme sur les autres pages ; le fondu du 27/10 allait jusqu'à 94 % et assombrissait le formateur. */
@media (min-width: 1200px) {
  body[data-page="formations"] .hero:not(.hero--accueil)::before {
    background: linear-gradient(0deg, rgba(4,20,38,.5), transparent 140px),
      linear-gradient(90deg, rgba(4,20,38,.97) 0%, rgba(4,20,38,.96) 24%, rgba(4,20,38,.92) 32%,
        rgba(4,20,38,.86) 40%, rgba(4,20,38,.86) calc(50% + 80px), rgba(4,20,38,.836) calc(50% + 108px),
        rgba(4,20,38,.771) calc(50% + 136px), rgba(4,20,38,.674) calc(50% + 164px), rgba(4,20,38,.557) calc(50% + 192px),
        rgba(4,20,38,.43) calc(50% + 220px), rgba(4,20,38,.303) calc(50% + 248px), rgba(4,20,38,.186) calc(50% + 276px),
        rgba(4,20,38,.089) calc(50% + 304px), rgba(4,20,38,.024) calc(50% + 332px), transparent calc(50% + 360px));
  }
  /* La vidéo (2200 × 940) dépasse vers le haut d'au moins 72 px et de 9,5 % de la hauteur du cadre : le faux texte
     que l'IA a dessiné sur l'écran du fond (« 2U2SP SEIECEF », 80 px du haut de l'image) reste hors cadre quelle
     que soit la hauteur, et elle couvre toujours le bas du cadre (le cadrage calculé pour un haut de 570 px laissait
     45 px vides au bas d'un haut de 635 px, de 1200 à ~1490 px). Cheveux du formateur ≈ 28 px sous la barre quand la
     largeur le permet ; vidéo un peu éclaircie. */
  html body[data-page="formations"] #contenu .hero > video.apercu-video {
    top: calc(-1 * max(72px, 9.5%));
    height: calc(100% + max(72px, 9.5%));
    object-position: 50% min(0px, max(100px - 5.364cqw, 100%));
    filter: brightness(1.18);
  }
  /* Image fixe (sous la vidéo, montrée si la vidéo manque) : même borne, jamais de bande vide au bas. */
  html body[data-page="formations"] #contenu .hero > img.hero__image {
    object-position: 50% min(0px, max(28px - 12.396cqw, 100%));
  }
}
@media (min-width: 1000px) {
  body[data-page="nos-solutions"] #controle-securite > .section__image {
    mask-image: linear-gradient(90deg, transparent calc(var(--droite-colonne) - var(--gauche-image) - 120px),
      rgba(0,0,0,.08) calc(var(--droite-colonne) - var(--gauche-image) - 20px),
      rgba(0,0,0,.32) calc(var(--droite-colonne) - var(--gauche-image) + 120px),
      rgba(0,0,0,.68) calc(var(--droite-colonne) - var(--gauche-image) + 260px),
      rgba(0,0,0,.92) calc(var(--droite-colonne) - var(--gauche-image) + 400px),
      #000 calc(var(--droite-colonne) - var(--gauche-image) + 520px)),
      linear-gradient(0deg, transparent, rgba(0,0,0,.35) 7%, rgba(0,0,0,.8) 16%, #000 25%);
    mask-composite: intersect;
  }
}
/* La famille de bandeaux mobiles garde sa propre densité ; raccord étalé en bas. */
@media (max-width: 1199px) {
  body[data-page] :is(.hero:not(.hero--accueil), .cta) > :is(img.hero__image, img.cta__image, video.apercu-video) {
    mask-image: linear-gradient(180deg, #000 38%, rgba(0,0,0,.94) 48%, rgba(0,0,0,.76) 62%,
      rgba(0,0,0,.46) 78%, rgba(0,0,0,.16) 92%, transparent 100%);
  }
}
@media (max-width: 999px) {
  body[data-page="nos-solutions"] #controle-securite > .section__image {
    mask-image: linear-gradient(180deg, #000 34%, rgba(0,0,0,.92) 48%, rgba(0,0,0,.68) 66%,
      rgba(0,0,0,.3) 85%, transparent 100%);
  }
}