/* ==========================================================================
   JustiComm · page « Agents IA » (assistant téléphonique, assistant de site, automatisations)
   v4, 24/10/2026 : mise en page plus claire et aérée, inspirée des pages des concurrents (cadres clairs pour les maquettes, comparatif en deux cartes, cadre en grille à filets fins, métiers en liste à gauche, méthode en cartes simples).
   v3, 23/10/2026 (soir) : ajouts v5 (photo et téléphone animé en haut, comparatif, « Choisissez votre profession », bandeau photo, espacements resserrés).
   v2, 23/10/2026 : texte v4 ; même esprit que Réseaux sociaux, Référencement local et Publicité en ligne
   (fil d’Ariane sur fond clair, bandeau pétrole pleine largeur, titre pétrole à fin dorée sur fond clair,
   sections qui s’ouvrent par surtitre + H2 + chapeau, maquettes dans des cartes, appel final calé à gauche).
   Tailles sobres (H1 ≈ 48 px, H2 ≈ 38 px, H3 ≈ 25 px, encadré ≈ 26 px) ; titres et textes en pleine largeur.
   Visuels et animations propres à la page, dessinés en SVG et CSS (rien de l’accueil ni de la démonstration « Alma »).
   Emplacement Remotion : la carte « fiche d’appel » (data-emplacement-remotion) accueillera la vidéo
   « Un appel, de la sonnerie à la fiche ».
   Animations jouées une fois, à l’arrivée, en moins de 4 s ; état final fixe si « moins d’animations » ou sans JavaScript.
   Préfixe : aia-
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Communs à la page
   -------------------------------------------------------------------------- */
body:has(.aia-haut) .entete__fond { opacity: 1; }   /* barre du haut lisible dès le départ sur le haut clair */
.aia-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .aia-or, .surface-nuit .aia-or { color: var(--or-clair, var(--or)); }
.aia-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(2rem, 3.5vw, 3rem); }
.aia-actions--centre { justify-content: center; }
.aia-actions .lien-suite { margin-top: 0; }
.aia-actions .btn-cartouche { min-height: 60px; }
.aia-court { width: 58% !important; }
.aia-ico { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.aia-s { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }   /* 48 → 80 px (Raoudha, 23/10/2026) */
.aia-s .titre-section, .aia-final .titre-section { max-width: none; font-size: clamp(1.875rem, 1.6rem + 0.75vw, 2.375rem); line-height: 1.15; text-wrap: pretty; }
.aia-tete .titre-section { margin-top: var(--e-4); }
.aia-chapo { margin-top: var(--e-5); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.4 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.aia-texte { margin-top: var(--e-5); font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }

/* Encadré fort : centré, pleine largeur, 22 → 26 px */
.aia-encadre {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 4vw, 3rem);
  border-block: 1px solid var(--filet-couleur);
  text-align: center; text-wrap: balance;
  font: 500 clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem) / 1.35 var(--f-titre); color: var(--titre);
}
.aia-encadre--sombre { border-color: rgba(224, 189, 142, 0.28); color: var(--creme); }
.aia-encadre__picto { display: block; width: 48px; height: 48px; margin: 0 auto var(--e-4); fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.aia-encadre__coche { stroke: #D08A5E; stroke-width: 2.2; }

.aia-renvoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.aia-renvoi .lien-suite { margin-top: 0; }
.aia-lien { color: var(--or-texte); text-underline-offset: 3px; white-space: nowrap; }
.aia-lien::after { content: " →"; }

/* --------------------------------------------------------------------------
   1. Haut de page : fil d’Ariane, bandeau pétrole (schéma animé), texte sur fond clair
   -------------------------------------------------------------------------- */
.aia-haut { position: relative; overflow: hidden; padding: var(--h-entete) 0 clamp(2rem, 4vw, 3rem); background: var(--papier); }
.aia-haut__ariane .aia-ariane { margin: 0; padding-block: 0.9rem; }
.aia-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--taupe); }
.aia-ariane a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 3px; }
.aia-ariane [aria-current] { color: var(--encre); }

.aia-bandeau { position: relative; margin: 0; background: var(--petrole-profond); }
.aia-bandeau__photo { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 900; object-fit: cover; object-position: 50% 42%; }
.aia-tel__ecran { color: var(--creme); }
.aia-tel__notifs { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.aia-notif { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.65rem; border-radius: 1rem; background: rgba(238, 234, 225, 0.14); backdrop-filter: blur(6px); }
.aia-notif__ico { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 0.6rem; background: var(--succes); font: 600 0.8125rem / 1 var(--f-texte); color: #fff; }
.aia-notif__ico svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aia-notif--ia .aia-notif__ico { background: var(--or); color: var(--petrole-profond); }
.aia-notif--sms .aia-notif__ico { background: #D08A5E; color: var(--petrole-profond); }
.aia-notif__txt { display: grid; min-width: 0; }
.aia-notif__txt b { font-size: 0.8125rem; font-weight: 600; line-height: 1.25; }
.aia-notif__txt small { font-size: 0.75rem; line-height: 1.3; color: var(--creme-doux); }
/* Ordinateur : le téléphone posé sur la moitié gauche, sombre, de la photo */
@media (min-width: 64em) {
  .aia-bandeau__scene { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
  .aia-tel { width: clamp(210px, 18vw, 270px); aspect-ratio: 9 / 18.5; margin-left: clamp(0rem, 4vw, 4rem); padding: 9px; border-radius: 2.4rem; background: #0B1A1A; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(224, 189, 142, 0.25); }
  .aia-tel__ecran { display: flex; flex-direction: column; height: 100%; padding: 0.6rem 0.7rem; border-radius: 1.9rem; overflow: hidden; background: linear-gradient(170deg, #1B4A4A 0%, #0A393A 45%, #062A2B 100%); }
  .aia-tel__barre { display: flex; align-items: center; justify-content: space-between; padding: 0.1rem 0.4rem; font-size: 0.75rem; font-weight: 600; }
  .aia-tel__ilot { width: 34%; height: 1.15rem; border-radius: 1rem; background: #000; }
  .aia-tel__etat { display: flex; align-items: flex-end; gap: 2px; }
  .aia-tel__etat i { width: 4px; border-radius: 1px; background: var(--creme); }
  .aia-tel__etat i:nth-child(1) { height: 5px; } .aia-tel__etat i:nth-child(2) { height: 7px; } .aia-tel__etat i:nth-child(3) { height: 9px; }
  .aia-tel__horloge { margin: 1rem 0 0.9rem; text-align: center; }
  .aia-tel__horloge b { display: block; font: 300 clamp(2.4rem, 3.4vw, 3.25rem) / 1 var(--f-texte); letter-spacing: 0.02em; }
  .aia-tel__horloge span { font-size: 0.8125rem; color: var(--creme-doux); }
}
/* Téléphone et tablette : la photo, puis les trois notifications qui la chevauchent */
@media (max-width: 63.99em) {
  .aia-bandeau__photo { aspect-ratio: 4 / 3; object-position: 70% 40%; }
  .aia-bandeau__scene { position: relative; margin-top: -3.5rem; padding-bottom: 1.25rem; }
  .aia-tel__ecran { max-width: 26rem; margin-inline: auto; padding: 0.75rem; border-radius: 1.25rem; background: rgba(6, 42, 43, 0.94); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); }
  .aia-tel__barre, .aia-tel__horloge { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .aia-tel:not(.est-visible) .aia-notif { opacity: 0; translate: 0 -12px; scale: 0.96; }
  .aia-tel.est-visible .aia-notif { transition: opacity 0.45s ease, translate 0.45s var(--ease-sortie), scale 0.45s var(--ease-sortie); transition-delay: calc(0.5s + var(--i) * 0.9s); }
  .aia-tel.est-visible .aia-notif--appel .aia-notif__ico svg { animation: aia-sonne-ico 0.18s ease-in-out 0.9s 8 alternate; }
}
@keyframes aia-sonne-ico { from { rotate: -12deg; } to { rotate: 12deg; } }

/* Texte du haut : une colonne, à gauche, pleine largeur */
.aia-haut__texte { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.aia-haut__titre { margin-top: var(--e-4); font: 500 clamp(2rem, 1.45rem + 1.5vw, 3rem) / 1.08 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.aia-haut__accroche { margin-top: var(--e-5); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.38 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.aia-haut__intro { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.65; color: var(--encre); text-wrap: pretty; }
.aia-haut .aia-actions { margin-top: var(--e-5); gap: 12px; }
.aia-engagements { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--encre); }
.aia-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.aia-engagements li::before { content: "✓"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; color: var(--or); }
.aia-professions { position: relative; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: var(--e-3); list-style: none; font-size: 0.9375rem; }
.aia-professions::before { content: ""; position: absolute; top: 0; left: var(--marge); right: var(--marge); height: 1px; background: var(--lin); }
.aia-professions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--taupe); text-decoration: none; }
.aia-professions a:hover, .aia-professions a:focus-visible { color: var(--petrole); }
@media (max-width: 30em) { .aia-haut .surtitre { font-size: 0.8125rem; letter-spacing: 0.14em; } }

/* --------------------------------------------------------------------------
   2. Le constat : les questions en notes, qui arrivent en désordre puis se rangent
   -------------------------------------------------------------------------- */
.aia-constat__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 60em) { .aia-constat__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.aia-notes { display: flex; flex-direction: column; align-items: center; gap: var(--e-5); }
.aia-notes__liste { display: grid; gap: 0.75rem; width: 100%; margin: 0; padding: 0; list-style: none; }
@media (min-width: 34em) { .aia-notes__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aia-note:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.375rem); } }
.aia-note {
  position: relative; padding: 0.95rem 1.25rem 0.95rem 2.75rem;
  background: #FFFDF8; border: 1px solid var(--lin);
  box-shadow: 0 12px 24px -16px rgba(6, 42, 43, 0.45);
  font: italic 500 clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem) / 1.3 var(--f-titre); color: var(--petrole);
}
.aia-note::before { content: ""; position: absolute; left: 1.1rem; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 4px rgba(176, 99, 57, 0.15); }
.aia-notes__badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1.1rem; border-radius: var(--rayon-pilule); background: var(--petrole); font-size: 0.9375rem; color: var(--creme); }
.aia-notes__badge svg { width: 18px; height: 18px; fill: none; stroke: var(--or); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .js .aia-notes:not(.est-visible) .aia-note, .js .aia-notes:not(.est-visible) .aia-notes__badge { opacity: 0; }
  .aia-notes.est-visible .aia-note { animation: aia-note 2.2s var(--ease-sortie) both; animation-delay: calc(var(--i) * 0.14s); }
  .aia-notes.est-visible .aia-notes__badge { animation: aia-badge 0.5s var(--ease-sortie) 2.5s both; }
}
@keyframes aia-note {
  0% { opacity: 0; transform: translate(var(--x), -16px) rotate(var(--r)); }
  22%, 58% { opacity: 1; transform: translate(var(--x), 0) rotate(var(--r)); }
  100% { opacity: 1; transform: none; }
}
@keyframes aia-badge { from { opacity: 0; transform: translateY(8px) scale(0.95); } to { opacity: 1; transform: none; } }

/* Comparatif : deux cartes claires côte à côte */
.aia-duo { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 48em) { .aia-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aia-duo__carte { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid #DDD5C7; border-radius: 18px; background: #FFFDF8; }
.aia-duo__carte--apres { border-color: rgba(10, 57, 58, 0.35); background: linear-gradient(160deg, #FFFDF8 0%, #EEF2EE 100%); box-shadow: 0 28px 50px -34px rgba(6, 42, 43, 0.45); }
.aia-duo__titre { display: flex; align-items: center; gap: 0.75rem; font: 500 clamp(1.375rem, 1.25rem + 0.35vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.aia-duo__carte--avant .aia-duo__titre { color: #5E5852; }
.aia-duo__ico { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid #C9BFAE; border-radius: 50%; }
.aia-duo__ico svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: #7A716A; stroke-width: 1.6; stroke-linecap: round; }
.aia-duo__ico--ia { border-color: var(--petrole); background: var(--petrole); font: 600 0.75rem / 1 var(--f-texte); letter-spacing: 0.04em; color: var(--or-clair, var(--or)); }
.aia-duo ul { display: grid; gap: 0; margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.aia-duo li { position: relative; padding: 0.85rem 0 0.85rem 2.2rem; border-top: 1px solid #E6DFD2; font-size: var(--t-corps); line-height: 1.5; color: var(--encre); }
.aia-duo li::before { position: absolute; left: 0; top: 1.05rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: 0.75rem; }
.aia-duo__carte--avant li { color: #5E5852; }
.aia-duo__carte--avant li::before { content: "✕"; border: 1px solid #C9BFAE; color: #7A716A; }
.aia-duo__carte--apres li { border-top-color: rgba(10, 57, 58, 0.14); }
.aia-duo__carte--apres li::before { content: "✓"; background: var(--petrole); color: var(--or-clair, var(--or)); }
@media (prefers-reduced-motion: no-preference) {
  .js .aia-duo:not(.est-visible) .aia-duo__carte--apres li { opacity: 0; translate: 10px 0; }
  .aia-duo.est-visible .aia-duo__carte--apres li { transition: opacity 0.45s ease, translate 0.45s var(--ease-sortie); transition-delay: calc(0.4s + var(--i) * 0.25s); }
}

/* --------------------------------------------------------------------------
   3. Les trois outils : texte et maquette dans une carte pétrole, en quinconce
   -------------------------------------------------------------------------- */
.aia-outil { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60em) {
  .aia-outil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aia-outil--inverse .aia-outil__texte { order: 2; }
}
.aia-outil__etiquette { display: flex; align-items: baseline; gap: 0.75rem; font: 500 0.9375rem / 1.3 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-texte); }
.aia-outil__etiquette span { font: 600 clamp(2.75rem, 2.2rem + 1.6vw, 4rem) / 0.9 var(--f-titre); letter-spacing: 0; font-variant-numeric: lining-nums; color: transparent; -webkit-text-stroke: 1.2px var(--bronze); }
.aia-outil__titre { margin-top: var(--e-3); font: 500 clamp(1.375rem, 1.25rem + 0.35vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.aia-outil__texte > p:not(.aia-outil__etiquette) { font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.aia-outil__texte > .aia-outil__titre + p { margin-top: var(--e-4); }
.aia-outil__texte > p.aia-renvoi { margin-top: var(--e-5); }
.aia-outils > .conteneur > .aia-actions { justify-content: center; margin-top: clamp(3rem, 6vw, 4.5rem); }

.aia-carte {
  display: flex; align-items: center; justify-content: center; margin: 0;
  min-height: clamp(20rem, 30vw, 26rem); padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem);
  border: 1px solid #E2DACB; border-radius: 22px;
  background: radial-gradient(ellipse 70% 70% at 80% 10%, rgba(224, 189, 142, 0.28), transparent 70%), linear-gradient(160deg, #FBF8F1 0%, #EAE3D5 100%);
}

/* 3.1 La fiche d'appel */
.aia-fiche__papier { width: min(100%, 26rem); padding: 1.5rem 1.5rem 1.4rem; border-radius: 2px; background: var(--papier); color: var(--encre); rotate: -1.2deg; box-shadow: 0 30px 50px -26px rgba(6, 42, 43, 0.55); }
.aia-fiche__tete { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--lin); font: 600 0.8125rem / 1.2 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--petrole); }
.aia-fiche__tete .aia-ico { width: 20px; height: 20px; color: var(--cuivre); }
.aia-fiche__heure { margin-left: auto; font-weight: 500; letter-spacing: 0.04em; color: var(--taupe); }
.aia-fiche__onde { display: flex; align-items: center; gap: 3px; height: 28px; margin: 0.9rem 0 0.35rem; }
.aia-fiche__onde i { flex: 1; height: 45%; border-radius: 2px; background: rgba(10, 57, 58, 0.3); }
.aia-fiche__onde i:nth-child(3n+1) { height: 75%; }
.aia-fiche__onde i:nth-child(4n+2) { height: 100%; background: rgba(176, 99, 57, 0.75); }
.aia-fiche__onde i:nth-child(5n) { height: 30%; }
.aia-fiche__champs { margin: 0.4rem 0 0; }
.aia-fiche__champs > div { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px dashed #D9D1C2; font-size: 0.9375rem; line-height: 1.35; }
.aia-fiche__champs dt { color: var(--taupe); }
.aia-fiche__champs dd { margin: 0; font-weight: 500; color: var(--encre); }
.aia-ok { margin-left: 0.2rem; font-weight: 600; color: var(--succes); }
.aia-fiche__envoi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.1rem; font-size: 0.875rem; color: var(--taupe); }
.aia-fiche__tampon { padding: 0.35rem 0.75rem; border: 2px solid #9A5230; border-radius: 3px; font: 600 0.8125rem / 1 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; color: #9A5230; rotate: -6deg; }
@media (prefers-reduced-motion: no-preference) {
  .js .aia-fiche:not(.est-visible) .aia-fiche__champs > div { opacity: 0; translate: -10px 0; }
  .js .aia-fiche:not(.est-visible) .aia-fiche__envoi { opacity: 0; }
  .js .aia-fiche:not(.est-visible) .aia-fiche__tampon { scale: 1.6; }
  .aia-fiche.est-visible .aia-fiche__champs > div { transition: opacity 0.4s ease, translate 0.4s var(--ease-sortie); transition-delay: calc(0.5s + var(--i) * 0.22s); }
  .aia-fiche.est-visible .aia-fiche__envoi { transition: opacity 0.3s ease 2.1s; }
  .aia-fiche.est-visible .aia-fiche__tampon { transition: scale 0.35s cubic-bezier(0.3, 1.5, 0.6, 1) 2.2s; }
  .aia-fiche.est-visible .aia-fiche__onde i { animation: aia-barre 0.45s ease-in-out 4 alternate; }
  .aia-fiche.est-visible .aia-fiche__onde i:nth-child(odd) { animation-delay: 0.15s; }
}
@keyframes aia-barre { from { scale: 1 1; } to { scale: 1 0.35; } }

/* 3.2 La fenêtre de discussion du site */
.aia-chat__fenetre {
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); grid-template-areas: "barre barre" "page panneau";
  column-gap: 1rem; width: min(100%, 32rem); padding-bottom: 1rem;
  background: #FFFFFF; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 50px -26px rgba(6, 42, 43, 0.5);
}
.aia-chat__barre { grid-area: barre; display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--lin); }
.aia-chat__barre i { width: 9px; height: 9px; border-radius: 50%; background: #C9BFAE; }
.aia-chat__barre span { flex: 1; height: 14px; margin-left: 10px; border-radius: 7px; background: var(--papier); }
.aia-chat__page { grid-area: page; display: grid; align-content: start; gap: 8px; padding: 1.25rem 0 0 1.25rem; }
.aia-chat__page b { display: block; width: 72%; height: 14px; margin-top: 8px; border-radius: 2px; background: rgba(10, 57, 58, 0.25); }
.aia-chat__page i { display: block; height: 7px; border-radius: 2px; background: rgba(10, 57, 58, 0.12); }
.aia-chat__panneau { grid-area: panneau; margin: 1rem 1rem 0 0; overflow: hidden; background: #fff; border: 1px solid var(--lin); border-radius: 10px; box-shadow: 0 14px 30px -14px rgba(6, 42, 43, 0.45); }
.aia-chat__tete { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; background: var(--petrole); font-size: 0.9375rem; font-weight: 500; color: var(--creme); }
.aia-chat__pastille { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--or); border-radius: 50%; font: 600 0.8125rem / 1 var(--f-texte); letter-spacing: 0.04em; color: var(--or-clair, var(--or)); }
.aia-chat__info { padding: 0.5rem 1rem; background: #F3EEE4; font-size: 0.8125rem; line-height: 1.35; color: #5E5852; }
.aia-chat__fil { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; }
.aia-bulle { max-width: 90%; padding: 0.6rem 0.8rem; border-radius: 12px; font-size: 0.9375rem; line-height: 1.4; }
.aia-bulle--visiteur { justify-self: end; border-bottom-right-radius: 3px; background: var(--petrole); color: var(--creme); }
.aia-bulle--ia { justify-self: start; border-bottom-left-radius: 3px; background: #F1ECE2; color: var(--encre); }
.aia-chat__choix { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.aia-chat__choix span { padding: 0.35rem 0.75rem; border: 1px solid var(--petrole); border-radius: var(--rayon-pilule); font-size: 0.8125rem; color: var(--petrole); }
.aia-chat__saisie { display: flex; flex-direction: column; gap: 0.2rem; margin: 0 1rem 1rem; padding: 0.55rem 0.8rem; border: 1px solid var(--lin); border-radius: 8px; }
.aia-chat__saisie span { font-size: 0.875rem; color: #5E5852; }
.aia-chat__saisie small { font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--or-texte); }
@media (max-width: 34em) {
  .aia-chat__fenetre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "barre" "panneau"; }
  .aia-chat__page { display: none; }
  .aia-chat__panneau { margin: 1rem 1rem 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .aia-chat:not(.est-visible) .aia-chat__fil > * { opacity: 0; translate: 0 10px; }
  .aia-chat.est-visible .aia-chat__fil > * { transition: opacity 0.45s ease, translate 0.45s var(--ease-sortie); transition-delay: calc(0.6s + var(--i) * 0.7s); }
}

/* 3.3 Le tri des messages */
.aia-tri__cadre { display: flex; flex-direction: column; gap: 1rem; width: min(100%, 30rem); padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 16px; background: var(--petrole-profond); box-shadow: 0 30px 50px -28px rgba(6, 42, 43, 0.6); }
.aia-tri__arrivee { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1rem; border: 1px dashed rgba(224, 189, 142, 0.5); border-radius: var(--rayon-pilule); font-size: 0.9375rem; color: var(--creme); }
.aia-tri__arrivee .aia-ico { color: var(--or); }
.aia-tri__bacs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.aia-tri__bac { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.aia-tri__pile {
  display: flex; flex-direction: column-reverse; align-items: center; gap: 5px;
  width: 100%; height: 124px; padding: 8px;
  border: 1px solid rgba(224, 189, 142, 0.5); border-top: 0; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, transparent, rgba(224, 189, 142, 0.1));
}
.aia-tri__pile i {
  display: block; width: min(72%, 54px); aspect-ratio: 16 / 10; border-radius: 3px;
  background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M1 1l15 10L31 1' fill='none' stroke='%230A393A' stroke-opacity='.45' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.aia-tri__bac--equipe .aia-tri__pile i { background-color: var(--or-clair, var(--or)); }
.aia-tri__nom { font-size: 0.875rem; line-height: 1.3; text-align: center; color: var(--creme); }
.aia-tri__brouillon { display: inline-flex; align-items: center; align-self: center; gap: 0.5rem; padding: 0.45rem 0.95rem; border-radius: var(--rayon-pilule); background: rgba(224, 189, 142, 0.14); font-size: 0.875rem; color: var(--or-clair, var(--or)); }
.aia-tri__brouillon .aia-ico { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .js .aia-tri:not(.est-visible) .aia-tri__pile i { opacity: 0; translate: 0 -70px; }
  .js .aia-tri:not(.est-visible) .aia-tri__brouillon { opacity: 0; translate: 0 8px; }
  .aia-tri.est-visible .aia-tri__pile i { transition: opacity 0.3s ease, translate 0.55s cubic-bezier(0.3, 1.4, 0.5, 1); transition-delay: calc(0.3s + var(--i) * 0.3s); }
  .aia-tri.est-visible .aia-tri__brouillon { transition: opacity 0.4s ease 2.8s, translate 0.4s var(--ease-sortie) 2.8s; }
}

/* Bandeau photo entre les outils et le cadre */
.aia-photo { margin: 0; background: var(--petrole-profond); }
.aia-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 600; object-fit: cover; object-position: 50% 52%; }
@media (max-width: 47.99em) { .aia-photo img { aspect-ratio: 16 / 9; } }

/* --------------------------------------------------------------------------
   4. Le cadre : section claire, six engagements en grille à filets fins, puis l'encadré
   -------------------------------------------------------------------------- */
.aia-regles { display: grid; column-gap: clamp(1.5rem, 3vw, 3rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .aia-regles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .aia-regles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aia-regle { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-content: start; padding: clamp(1.5rem, 2.5vw, 2rem) 0; border-top: 1px solid var(--lin); }
.js .aia-regle[data-reveal] { transition-delay: calc(var(--i) * 80ms); }
.aia-regle__picto { grid-row: span 2; width: 44px; height: 44px; fill: none; stroke: var(--petrole); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.aia-regle__picto text { fill: var(--cuivre); stroke: none; font: 600 12px / 1 var(--f-texte); letter-spacing: 0.04em; text-anchor: middle; }
.aia-regle__picto .aia-regle__para { font: 500 22px / 1 var(--f-titre); fill: var(--petrole); }
.aia-regle__barre, .aia-regle__trait { stroke: var(--cuivre); stroke-width: 2.2; }
.aia-regle__plein, .aia-regle__etoile { fill: var(--cuivre); stroke: none; }
.aia-regle__titre { font: 500 clamp(1.3125rem, 1.2rem + 0.3vw, 1.5rem) / 1.2 var(--f-titre); color: var(--petrole); }
.aia-regle p { margin-top: var(--e-2); font-size: var(--t-corps); line-height: 1.55; color: var(--texte); }
.aia-toujours { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.25rem 0.5rem; width: fit-content; max-width: 100%; margin: clamp(1.5rem, 3vw, 2rem) auto 0; padding: 0.9rem 1.5rem; border: 1px solid #D6CFC1; border-radius: var(--rayon-pilule); background: #FFFDF8; text-align: center; font-size: var(--t-corps); line-height: 1.5; color: var(--encre); }
.aia-toujours__mot { font: italic 500 1.25em / 1 var(--f-titre); color: var(--or-texte); }
@media (max-width: 40em) { .aia-toujours { border-radius: 1rem; } }
.aia-cadre__fin .aia-encadre { margin-top: clamp(2rem, 4vw, 3rem); }
.aia-cadre .aia-encadre__picto { stroke: var(--petrole); }
.aia-cadre .aia-encadre__coche { stroke: var(--cuivre); }
@media (prefers-reduced-motion: no-preference) {
  .js .aia-cadre__fin:not(.est-visible) .aia-encadre__picto { opacity: 0; scale: 1.5; }
  .js .aia-cadre__fin:not(.est-visible) .aia-encadre .aia-or { opacity: 0; filter: blur(5px); }
  .aia-cadre__fin.est-visible .aia-encadre__picto { transition: opacity 0.25s ease 0.3s, scale 0.4s cubic-bezier(0.3, 1.5, 0.6, 1) 0.3s; }
  .aia-cadre__fin.est-visible .aia-encadre .aia-or { transition: opacity 0.7s ease 1s, filter 0.7s ease 1s; }
}

/* --------------------------------------------------------------------------
   5. « Choisissez votre profession » : sans JavaScript, six exemples en cartes ;
      avec js/agents-ia.js, la liste des métiers à gauche et la conversation à droite
   -------------------------------------------------------------------------- */
.aia-metier { margin-top: clamp(2rem, 4vw, 3rem); }
.aia-metier__consigne { font: 500 0.875rem / 1.3 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-texte); }
.aia-metier__onglets[hidden] { display: none; }
.aia-onglet { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0.7rem 1rem; border: 0; border-left: 2px solid transparent; background: none; text-align: left; font: 500 1rem / 1.3 var(--f-texte); color: #5E5852; cursor: pointer; transition: background-color var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie), border-color var(--d) var(--ease-sortie); }
.aia-onglet:hover { color: var(--petrole); background: rgba(255, 253, 248, 0.7); }
.aia-onglet[aria-selected="true"] { border-left-color: var(--cuivre); background: #FFFDF8; color: var(--petrole); }
.aia-onglet:focus-visible { outline: 2px solid var(--petrole); outline-offset: -2px; }
.aia-metier:not(.est-onglets) { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 56em) {
  .aia-metier:not(.est-onglets) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aia-metier:not(.est-onglets) .aia-metier__consigne { grid-column: 1 / -1; }
}
.est-onglets.aia-metier { display: grid; gap: var(--e-4) clamp(1.5rem, 3vw, 3rem); }
.est-onglets .aia-metier__onglets { display: flex; flex-direction: column; border-left: 1px solid #D6CFC1; }
@media (min-width: 60em) {
  .est-onglets.aia-metier { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); grid-template-areas: "consigne panneau" "onglets panneau"; grid-template-rows: auto 1fr; align-items: start; }
  .est-onglets .aia-metier__consigne { grid-area: consigne; }
  .est-onglets .aia-metier__onglets { grid-area: onglets; }
  .est-onglets .aia-ex { grid-area: panneau; }
}
@media (max-width: 59.99em) {
  .est-onglets .aia-metier__onglets { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; border-left: 0; }
  .est-onglets .aia-onglet { flex: none; width: auto; min-height: 44px; padding: 0.45rem 1rem; border: 1px solid #C9BFAE; border-radius: var(--rayon-pilule); background: #FFFDF8; }
  .est-onglets .aia-onglet[aria-selected="true"] { border-color: var(--petrole); background: var(--petrole); color: var(--creme); }
}
.aia-ex {
  display: grid; gap: var(--e-4); padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid #E2DACB; border-radius: 22px;
  background: radial-gradient(ellipse 70% 70% at 85% 0%, rgba(224, 189, 142, 0.25), transparent 70%), linear-gradient(160deg, #FBF8F1 0%, #EAE3D5 100%);
}
.aia-ex[hidden] { display: none !important; }
.aia-ex:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
.aia-ex__titre { font: 500 clamp(1.375rem, 1.25rem + 0.35vw, 1.5625rem) / 1.2 var(--f-titre); }
.aia-ex__titre a { color: var(--petrole); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--d) var(--ease-sortie); }
.aia-ex__titre a:hover, .aia-ex__titre a:focus-visible { background-size: 100% 1px; }
.aia-ex__fil { display: grid; gap: 0.75rem; padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: 16px; background: var(--petrole-profond); box-shadow: 0 30px 50px -30px rgba(6, 42, 43, 0.6); }
.aia-ex__fil > p + p { margin-top: 0; }
.aia-ex__bulle { max-width: 88%; padding: 0.75rem 1rem; border-radius: 14px; font-size: 1.0625rem; line-height: 1.45; }
.aia-ex__bulle--appelant { justify-self: end; border-bottom-right-radius: 4px; background: var(--creme); color: var(--encre); }
.aia-ex__bulle--ia { justify-self: start; border: 1px solid rgba(224, 189, 142, 0.35); border-bottom-left-radius: 4px; background: var(--petrole); color: var(--creme); }
.aia-ex__qui { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.aia-ex__bulle--appelant .aia-ex__qui { color: #5E5852; }
.aia-ex__bulle--ia .aia-ex__qui { color: var(--or-clair, var(--or)); }
.aia-ex__regle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; font-size: var(--t-corps); line-height: 1.55; color: var(--petrole); }
.aia-ex__regle::before {
  content: ""; width: 20px; height: 20px; margin-top: 0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B06339' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3.2v5.8c0 5.2-3.4 8.9-8 10.9-4.6-2-8-5.7-8-10.9V5.7z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.aia-ex__regle-mot { margin-right: 0.25rem; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .est-onglets .aia-ex.est-actif .aia-ex__bulle, .est-onglets .aia-ex.est-actif .aia-ex__regle { animation: aia-bulle 0.4s var(--ease-sortie) both; }
  .est-onglets .aia-ex.est-actif .aia-ex__bulle--ia { animation-delay: 0.5s; }
  .est-onglets .aia-ex.est-actif .aia-ex__regle { animation-delay: 1s; }
}
@keyframes aia-bulle { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }

/* --------------------------------------------------------------------------
   6. Méthode : cinq interrupteurs qui passent en position « marche », puis le tarif
   -------------------------------------------------------------------------- */
.aia-etapes { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .aia-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .aia-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 76em) { .aia-etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.aia-etape { display: flex; flex-direction: column; padding: clamp(1.25rem, 2vw, 1.6rem); border: 1px solid #E2DACB; border-radius: 18px; background: #FFFDF8; }
.js .aia-etape[data-reveal] { transition-delay: calc(var(--i) * 90ms); }
.aia-etape__num { font: 500 2.25rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: var(--cuivre); }
.aia-etape__titre { margin-top: var(--e-4); font: 500 clamp(1.3125rem, 1.2rem + 0.3vw, 1.5rem) / 1.2 var(--f-titre); color: var(--petrole); }
.aia-etape p { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.55; color: var(--texte); }
.aia-dossier { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: var(--e-5); padding: 1rem 1.25rem; border: 1px solid #E2DACB; border-radius: 14px; background: #FFFDF8; font-size: var(--t-legende); line-height: 1.5; color: var(--encre); }
.aia-dossier .aia-ico { width: 26px; height: 26px; color: var(--cuivre); }

.aia-tarif {
  max-width: 52rem; margin: clamp(3.5rem, 7vw, 5rem) auto 0; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
  text-align: center;
  clip-path: polygon(var(--pan) 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%, 0 var(--pan));
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(224, 189, 142, 0.16), transparent 70%), var(--petrole);
}
/* Carte du tarif : fond pétrole dans une section claire → boutons de la version « fond foncé » (valeurs de boutons.css, :root) */
.aia-tarif {
  --plaque-fond: #E0BD8E;
  --plaque-fond-survol: #F2D9AC;
  --plaque-fond-appui: #D6B080;
  --plaque-texte: #0A393A;
  --plaque-reflet: rgba(255, 251, 242, .62);
  --plaque-reflet-a: 40%;
  --plaque-reflet-b: 60%;
  --plaque-appui-ombre: rgba(6, 42, 43, .18);
  --plaque-filet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M11.86 4.5H28.14L35.5 11.86V28.14L28.14 35.5H11.86L4.5 28.14V11.86Z' fill='none' stroke='%230A393A' stroke-width='.9'/%3E%3C/svg%3E");
  --cartouche-texte: #E0BD8E;
  --cartouche-texte-survol: #F2D9AC;
  --cartouche-survol: rgba(238, 234, 225, .05);
  --cartouche-appui: rgba(238, 234, 225, .09);
  --cartouche-filets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23E0BD8E'%3E%3Cpath d='M9.98 .7H38.02A10 10 0 0 0 47.3 9.98V38.02A10 10 0 0 0 38.02 47.3H9.98A10 10 0 0 0 .7 38.02V9.98A10 10 0 0 0 9.98 .7Z' stroke-width='1.4'/%3E%3Cpath d='M13.19 4.7H34.81A14 14 0 0 0 43.3 13.19V34.81A14 14 0 0 0 34.81 43.3H13.19A14 14 0 0 0 4.7 34.81V13.19A14 14 0 0 0 13.19 4.7Z' stroke-width='.6' stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  --focus-plaque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M14.93 2H25.07L38 14.93V25.07L25.07 38H14.93L2 25.07V14.93Z' fill='none' stroke='%23F2D9AC' stroke-width='2'/%3E%3C/svg%3E");
  --focus-cartouche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M12 2H28A10 10 0 0 0 38 12V28A10 10 0 0 0 28 38H12A10 10 0 0 0 2 28V12A10 10 0 0 0 12 2Z' fill='none' stroke='%23F2D9AC' stroke-width='2'/%3E%3C/svg%3E");
}
.aia-tarif__titre { font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem) / 1.2 var(--f-titre); color: var(--creme); text-wrap: balance; }
.aia-tarif__texte { margin: var(--e-5) auto 0; font-size: var(--t-corps); line-height: 1.65; color: var(--creme); text-wrap: pretty; }
.aia-compteurs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: var(--e-6); }
.aia-compteur { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 1rem; border-radius: var(--rayon-pilule); font-size: 0.9375rem; }
.aia-compteur--non { border: 1px solid rgba(224, 189, 142, 0.4); color: var(--creme-doux); }
.aia-compteur--non::after { content: ""; position: absolute; left: 0.7rem; right: 0.7rem; top: 50%; height: 2px; background: #D08A5E; transform-origin: left center; }
.aia-compteur--oui { background: var(--or); font-weight: 500; color: var(--petrole-profond); }
@media (prefers-reduced-motion: no-preference) {
  .js .aia-tarif:not(.est-visible) .aia-compteur--non::after { transform: scaleX(0); }
  .js .aia-tarif:not(.est-visible) .aia-compteur--oui { opacity: 0; scale: 0.9; }
  .aia-tarif.est-visible .aia-compteur--non::after { transition: transform 0.45s ease; transition-delay: calc(0.5s + var(--i) * 0.3s); }
  .aia-tarif.est-visible .aia-compteur--oui { transition: opacity 0.4s ease 1.5s, scale 0.4s var(--ease-sortie) 1.5s; }
}

/* --------------------------------------------------------------------------
   7. Appel final : texte à gauche, horloge à 20 h à droite (dans la grille : rien n'est coupé)
   -------------------------------------------------------------------------- */
.aia-final {
  position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 6rem);
  background: radial-gradient(ellipse 45% 75% at 80% 50%, rgba(176, 99, 57, 0.22), transparent 70%), var(--petrole-profond);
}
.aia-final__grille { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 60em) { .aia-final__grille { grid-template-columns: minmax(0, 1fr) clamp(15rem, 24vw, 21rem); } }
.aia-final__contenu { text-align: left; }
.aia-final .titre-section { color: var(--creme); }
.aia-final__texte { margin-top: var(--e-4); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.4 var(--f-titre); color: var(--creme-doux); text-wrap: pretty; }
.aia-final__horloge { display: block; width: 100%; max-width: 21rem; height: auto; margin-inline: auto; fill: none; stroke: rgba(224, 189, 142, 0.4); stroke-width: 1.4; stroke-linecap: round; overflow: visible; }
.aia-final__cercle { stroke-dasharray: 2 10; }
.aia-final__graduations { stroke: rgba(224, 189, 142, 0.7); stroke-width: 2.5; }
.aia-final__minutes { stroke: var(--or-clair, var(--or)); stroke-width: 4; }
.aia-final__heures { stroke: #D08A5E; stroke-width: 6; }
.aia-final__axe { fill: #D08A5E; stroke: none; }
.aia-final__onde { stroke: #D08A5E; stroke-width: 3.5; }
@media (max-width: 59.99em) {
  .aia-final__horloge { order: -1; width: 8.5rem; margin-inline: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .aia-final__heures, .aia-final__minutes { transform-box: view-box; transform-origin: 200px 200px; }
  .js .aia-final__grille:not(.est-visible) .aia-final__heures { rotate: -150deg; }
  .js .aia-final__grille:not(.est-visible) .aia-final__minutes { rotate: -360deg; }
  .aia-final__grille.est-visible .aia-final__heures, .aia-final__grille.est-visible .aia-final__minutes { transition: rotate 1.4s var(--ease-douce) 0.3s; }
  .aia-final__grille.est-visible .aia-final__onde { animation: aia-sonne 0.8s ease-in-out 1.7s 3; }
  .aia-final__grille.est-visible .aia-final__onde--2 { animation-delay: 1.85s; }
}
@keyframes aia-sonne { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

/* --------------------------------------------------------------------------
   8. Vidéo « Un appel, de la sonnerie à la fiche » (24/10/2026) : lecteur à la demande, avec le son,
      bouton « Écouter l'appel » posé sur l'affiche, transcription et crédits des voix sous la vidéo
   -------------------------------------------------------------------------- */
.aia-video-appel { flex-direction: column; align-items: stretch; gap: var(--e-4); }
.aia-video-appel__cadre { position: relative; overflow: hidden; border-radius: 14px; background: var(--petrole-profond); box-shadow: 0 30px 50px -26px rgba(6, 42, 43, 0.55); }
.aia-video-appel__media { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; background: var(--petrole-profond); }
.aia-video-appel__lecture {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.7rem 1.4rem 0.7rem 0.8rem;
  border: 1px solid rgba(224, 189, 142, 0.7); border-radius: var(--rayon-pilule);
  background: rgba(6, 42, 43, 0.88); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  font: 500 1rem / 1.2 var(--f-texte); color: var(--creme); cursor: pointer;
  transition: background-color var(--d) var(--ease-sortie), scale var(--d) var(--ease-sortie);
}
.aia-video-appel__lecture[hidden] { display: none; }
.aia-video-appel__lecture:hover { background: var(--petrole); scale: 1.03; }
.aia-video-appel__lecture:focus-visible { outline: 2px solid var(--or-clair, var(--or)); outline-offset: 3px; }
.aia-video-appel__lecture small { font-size: 0.875rem; color: var(--creme-doux); }
.aia-video-appel__icone { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--or); }
.aia-video-appel__icone::after { content: ""; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--petrole-profond); }
.aia-video-appel__legende { display: grid; gap: var(--e-3); font-size: 0.9375rem; line-height: 1.5; color: #5E5852; }
.aia-video-appel__legende summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 500; color: var(--petrole); cursor: pointer; }
.aia-video-appel__legende summary::marker { color: var(--cuivre); }
.aia-video-appel__legende ol { display: grid; gap: 0.5rem; margin: var(--e-2) 0 0; padding: 0; list-style: none; }
.aia-video-appel__legende li { font-size: var(--t-legende); color: var(--encre); }
.aia-video-appel__legende li b { font-weight: 600; color: var(--petrole); }
.aia-video-appel__credits { font-size: 0.8125rem; line-height: 1.45; color: #5E5852; }
@media (max-width: 40em) {
  .aia-carte.aia-video-appel { min-height: 0; padding: 0.75rem 0.75rem 1rem; }
  .aia-video-appel__lecture { min-height: 48px; padding: 0.5rem 1rem 0.5rem 0.55rem; font-size: 0.9375rem; }
  .aia-video-appel__icone { width: 34px; height: 34px; }
}