/* Page À propos. S'appuie sur css/tokens.css et css/accueil.css (tampons, navigation, entrées, pied de page).
   Défilement libre. Chaque section a son fond : crème (affiche), noir (histoire et pellicule), blanc (métiers),
   jaune (partenaires), bleu (références), noir (et la suite).
   Le portrait noir et blanc se pose devant un aplat jaune ; les titres géants sont en Outfit Black. */

.ap-tiret{ display:inline-block; width:1.2em; height:.12em; margin-left:.25em; vertical-align:.28em; background:currentColor; }
.ap-num{ font:700 var(--t-kicker)/1 var(--ff-title); letter-spacing:.06em; font-variant-numeric:tabular-nums; }

/* Une ligne de titre cinétique ne se coupe jamais entre deux lettres. */
[data-kine] .line > span{ white-space:nowrap; }

/* =============== 1. AFFICHE =============== */
/* Téléphone : légendes, titre, phrase, puis le portrait dans toute la hauteur qui reste.
   Ordinateur : le titre à gauche, le portrait et ses aplats à droite, collés au bas de l'écran. */
.ap-hero{ --edge:max(20px,4vw); background:var(--blanc);   /* blanc : raccord avec le bouton « À propos » du menu */
  color:var(--noir); display:grid;
  grid-template-rows:auto auto auto minmax(44svh,1fr); padding-inline:var(--edge);
  --tfs:calc((100vw - 2 * var(--edge)) / 4.85); }
.ap-legs{ display:grid; gap:6px; padding-top:max(var(--s-4),env(safe-area-inset-top,0px)); padding-right:var(--nav-reserve); color:var(--noir); }
.ap-legs li::before{ content:""; display:block; width:14px; height:3px; margin-bottom:5px; background:var(--bleu); }
.ap-legs li{ display:flex; flex-direction:column; }
.ap-legs a{ text-decoration:none; }
.ap-legs a:hover, .ap-legs a:focus-visible{ color:var(--bleu); }
.ap-legs li + li::before{ display:none; }
/* Le titre-affiche. L'accent du É dépasse la capitale de 0,27 em : la dernière ligne descend d'autant. */
.ap-title{ position:relative; z-index:var(--z-titre); margin-top:clamp(14px,3.5svh,48px);
  font:900 var(--tfs)/.86 var(--ff-title); text-transform:uppercase; letter-spacing:-.03em; }
/* Un peu plus petit que la largeur ne le permet, pour donner de l'interligne : les lignes ne se touchent plus. */
.ap-title{ font-size:calc(var(--tfs) * .88); line-height:1; }
.ap-title__nom{ margin-top:.12em; color:var(--bleu); }
.ap-point{ display:inline-block; width:.19em; height:.19em; margin-left:.05em; background:var(--noir); }
.ap-lede{ position:relative; z-index:3; display:grid; gap:var(--s-2); padding-top:var(--s-5); }
.ap-lede .serif{ max-width:26ch; }
/* La scène est un conteneur : le portrait prend la plus grande taille qui tient. Les aplats jaunes sont
   posés dans le même cadre que l'image, donc ils suivent le portrait à toutes les tailles. */
.ap-stage{ position:relative; min-height:0; margin-inline:calc(var(--edge) * -1); container-type:size; }
.ap-cadre{ --W:min(125cqw, 100cqh / .872); position:absolute; bottom:0; left:calc(58cqw - var(--W) * .46);
  width:var(--W); aspect-ratio:1400 / 1221; }
.ap-aplat{ position:absolute; background:var(--jaune); transform-origin:50% 100%; }
.ap-aplat--a{ left:20%; top:7%; width:50%; height:75%; }
.ap-aplat--b{ left:56%; top:36%; width:36%; height:46%; }
.ap-pic{ position:absolute; inset:0; z-index:1; margin:0; }
.ap-pic img{ width:100%; height:auto; filter:var(--sh-cut); }

@media (min-width:48em){
  .ap-hero{ --tfs:min((100vw - 2 * var(--edge)) / 4.85, 12svh); }
  .ap-legs{ display:flex; justify-content:space-between; gap:var(--s-5); max-width:calc(100% - var(--nav-reserve)); padding-right:0; }
  .ap-legs li + li::before{ display:block; }
}
@media (min-width:64em){
  .ap-hero{ --tfs:min((50vw - var(--edge)) / 4.85, 22svh); grid-template-rows:auto auto auto 1fr; }
  .ap-legs{ max-width:calc(54vw - var(--edge)); }
  .ap-title{ margin-top:clamp(24px,6svh,72px); }
  .ap-lede .serif{ font-size:clamp(1.3rem,1.4vw + .5rem,2rem); max-width:22ch; }
  /* La scène occupe la droite de l'écran, du haut en bas ; le portrait passe devant la fin du titre. */
  .ap-stage{ position:absolute; top:0; bottom:0; right:0; left:46vw; margin:0; z-index:var(--z-photo); }
  .ap-cadre{ --W:min(100cqw, 94cqh / .872); left:auto; right:-2cqw; }
  }

/* Le portrait monte depuis le bas de l'écran ; les aplats se lèvent derrière lui. */
.play :is(.ap-pic, .ap-traits--hero){ animation:ap-sort var(--t-titre) var(--sortie) both; animation-delay:var(--t-decal); }
/* « Et la suite ? » : le portrait et son contour montent du bas, ensemble, comme sur l'affiche. */
.play :is(.ap-suite__pic, .ap-traits--suite){ animation:ap-sort var(--t-titre) var(--sortie) both; animation-delay:calc(var(--t-decal) * 2); }
@keyframes ap-sort{ from{ transform:translateY(105%); } to{ transform:none; } }
.play .ap-aplat{ animation:ap-aplat var(--t-entree) var(--sortie) both; animation-delay:calc(var(--t-decal) * 2); }
.play .ap-aplat--b{ animation-delay:calc(var(--t-decal) * 3); }
@keyframes ap-aplat{ from{ transform:scaleY(0); } to{ transform:none; } }

/* =============== Défilement libre =============== */
/* Contrairement à l'accueil, la page À propos se lit d'un trait : pas d'aimantation écran par écran.
   Seule l'affiche garde la hauteur de l'écran ; les autres sections prennent la hauteur de leur contenu. */
html{ scroll-snap-type:none; }
.screen, .foot{ scroll-snap-align:none; scroll-snap-stop:normal; }

/* =============== Une seule échelle pour toute la page =============== */
/* Tous les titres de section ont la taille de « Et la suite ? ». Puis trois tailles seulement :
   accroche (Bricolage), intitulé, texte courant. Mêmes marges d'une section à l'autre. */
:root{
  --pad-y:clamp(4rem,8vw,7rem);
  --ap-h2:clamp(2.8rem,6vw + .5rem,5.5rem);
  --ap-lead:clamp(1.05rem,.45vw + .95rem,1.3rem);
  --ap-h3:clamp(1.35rem,1.4vw + .8rem,2.2rem);
  --ap-txt:1.0625rem;
}
.ap-sec{ padding-block:var(--pad-y); }
/* Le contenu part du bord gauche de la page ; sur ordinateur, il s'arrête avant la colonne de navigation. */
.ap-wrap{ padding-inline:var(--gut); }
@media (min-width:64em){ .ap-wrap{ padding-right:var(--nav-reserve); } }

.ap-h2{ font:900 var(--ap-h2)/.92 var(--ff-title); text-transform:uppercase; letter-spacing:0; word-spacing:.06em; text-wrap:balance; }
.ap-lead{ font-size:var(--ap-lead); line-height:1.45; text-wrap:pretty; }
.ap-txt{ font-size:var(--ap-txt); line-height:1.6; max-width:60ch; }

/* =============== 2. L'HISTOIRE : fond bleu, le récit puis la pellicule =============== */
.ap-histoire{ --ecart:clamp(4.5rem,6vw,5.5rem); position:relative; background:var(--bleu); color:var(--blanc); overflow:hidden; padding-bottom:0; }   /* la pellicule ferme la section */
.ap-histoire .ap-wrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--ecart); }   /* titre, texte, pellicule : le même écart */
.ap-histoire .ap-lead{ max-width:64ch; }

/* Le sticker « Bénie par la Bonne Mère » (le même que sur le portfolio) : la statue détourée avec un liseré
   blanc et son cartouche, posée de travers dans le vide à droite du récit. Elle se balance doucement. */
/* Téléphone : centré en hauteur sur le titre « L'histoire » (hauteur du sticker = largeur × 868/560, moitié = × .775),
   et en largeur entre la fin du mot (16,56rem depuis le bord gauche) et le bord droit de l'écran. */
.ap-sticker{ position:absolute; z-index:1; top:calc(var(--pad-y) + 1.3rem - clamp(64px,20vw,110px) * .775); right:max(.25rem, (100vw - 16.56rem - clamp(64px,20vw,110px)) / 2); width:clamp(64px,20vw,110px); margin:0; }
.ap-sticker__in{ display:block; rotate:-5deg; transform-origin:50% 70%; animation:ap-balance 8s ease-in-out infinite; }
.ap-sticker img{ display:block; width:100%; height:auto;
  filter:drop-shadow(3px 0 0 var(--blanc)) drop-shadow(-3px 0 0 var(--blanc)) drop-shadow(0 3px 0 var(--blanc)) drop-shadow(0 -3px 0 var(--blanc))
         drop-shadow(0 10px 14px rgba(0,0,0,.28)); }
.ap-sticker__cap{ position:absolute; left:50%; bottom:4%; translate:-50% 0; rotate:-6deg; padding:5px 8px; background:var(--blanc); color:var(--noir);
  font:900 clamp(.5rem,.55vw + .3rem,.75rem)/1 var(--ff-title); text-transform:uppercase; white-space:nowrap; box-shadow:0 3px 8px rgba(0,0,0,.2); }
@keyframes ap-balance{ 0%,100%{ rotate:-5deg; } 50%{ rotate:-1.5deg; } }
/* Téléphone : cartouche sur deux lignes, gardé dans la largeur du sticker pour ne pas mordre sur le récit. */
@media (max-width:63.99em){ .ap-sticker__cap{ white-space:normal; width:116%; text-align:center; line-height:1.1; font-size:.5rem; padding:4px 5px; } }
.ap-histoire .ap-h2{ padding-right:calc(clamp(64px,20vw,110px) + var(--s-4)); }
@media (min-width:64em){
  /* Ordinateur : centrée vers 73 % de la largeur, du haut de la section jusqu'au-dessus de la pellicule. */
  .ap-sticker{ top:clamp(3rem,5vw,5rem); right:auto; left:calc(75.4% - 7.15vw); top:5.25vw; width:14.3vw; max-width:280px; }
  .ap-histoire .ap-h2{ padding-right:0; }
}

/* La pellicule : une bande noire perforée, d'un bord à l'autre de l'écran, qui défile à l'horizontale.
   Les perforations sont dans le fond de la bande, en « local » : elles défilent avec les photos. */
.ap-film{ --vue:clamp(150px,16vw,240px); position:relative; min-width:0; margin-top:0; margin-inline:calc(var(--gut) * -1); }
@media (min-width:64em){ .ap-film{ margin-right:calc(var(--nav-reserve) * -1); } }
.ap-film__bande{ overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:var(--gut); scrollbar-width:none; outline:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Crect x='7' y='.5' width='10' height='13' rx='2' fill='%23F6F3EC'/%3E%3C/svg%3E") 0 9px / 24px 14px repeat-x local,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Crect x='7' y='.5' width='10' height='13' rx='2' fill='%23F6F3EC'/%3E%3C/svg%3E") 0 calc(100% - 9px) / 24px 14px repeat-x local,
    var(--noir); }
.ap-film__bande::-webkit-scrollbar{ display:none; }
.ap-film__vues{ display:flex; gap:14px; width:max-content; padding:46px var(--gut) 56px; }   /* marge du bas plus large : le compteur y est imprimé */
.ap-film__vues li{ flex:none; scroll-snap-align:start; }
/* L'inscription de bord de film, imprimée au-dessus de chaque vue */
.ap-film__vues li::before{ content:"FITOU 400  ▸"; position:absolute; left:2px; top:-17px; white-space:pre;
  font:700 9px/1 var(--ff-title); letter-spacing:.18em; color:var(--jaune); opacity:.8; }
/* Largeur écrite en dur (et non aspect-ratio), photo en position absolue : sinon Safari (iPhone) calcule la
   largeur de chaque vue d'après la taille d'origine de l'image (427 à 640 px), d'où de grands vides entre les photos. */
.ap-vue{ position:relative; display:block; height:var(--vue); width:calc(var(--vue) * 1.5); padding:0; border:0; border-radius:3px;
  overflow:hidden; background:#000; cursor:zoom-in; }
.ap-vue img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% var(--y,50%);
  transition:transform var(--t-entree) var(--sortie); }
/* Le coin « agrandir », toujours visible pour qu'on sache que la photo s'ouvre, y compris au doigt */
.ap-vue::after{ content:""; position:absolute; right:8px; bottom:8px; width:28px; height:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M14 5h5v5M10 19H5v-5M19 5l-6 6M5 19l6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); transition:transform var(--t-survol) var(--sortie); }   /* juste l'icône blanche, sans fond, pour ne pas cacher la photo */
.ap-vue:focus-visible{ outline:3px solid var(--jaune); outline-offset:3px; }
@media (hover:hover){
  .ap-vue:hover img{ transform:scale(1.05); }
  .ap-vue:hover::after{ transform:scale(1.15); }
}
/* Les flèches sont posées dans l'écart au-dessus de la bande, sans le modifier. */
/* Le compteur, imprimé en jaune dans la marge du bas de la bande, entre les vues et les perforations,
   dans le même caractère que « FITOU 400 ▸ ». Il ne défile pas avec les photos. */
.ap-film__compteur{ position:absolute; z-index:2; right:var(--gut); bottom:25px; display:flex; align-items:center; gap:2px;
  font:700 12px/1 var(--ff-title); letter-spacing:.18em; color:var(--jaune); }
@media (min-width:64em){ .ap-film__compteur{ right:var(--nav-reserve); } }
.ap-film__num{ padding-inline:6px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ap-film__num b{ font-weight:900; }
.ap-film__fl{ display:grid; place-items:center; min-width:30px; height:22px; padding:0 6px; border:0; background:none; color:var(--jaune);
  font:900 17px/1 var(--ff-title); cursor:pointer; transition:color var(--t-survol) var(--sortie), transform var(--t-survol) var(--sortie); }
.ap-film__fl:hover:not(:disabled){ color:var(--blanc); }
.ap-film__fl[data-dir="-1"]:hover:not(:disabled){ transform:translateX(-2px); }
.ap-film__fl[data-dir="1"]:hover:not(:disabled){ transform:translateX(2px); }
.ap-film__fl:focus-visible{ outline:2px solid var(--jaune); outline-offset:2px; }
.ap-film__fl:disabled{ opacity:.3; cursor:default; }

/* La visionneuse : la photo entière, en grand, sur fond noir */
.ap-visio{ width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; border:0; background:rgba(20,17,18,.97); color:var(--creme); overflow:hidden; }
.ap-visio::backdrop{ background:transparent; }
.ap-visio[open]{ display:grid; place-items:center; }
.ap-visio__fig{ display:grid; justify-items:center; gap:14px; margin:0; padding:72px 16px 96px; }
.ap-visio__fig img{ width:auto; height:auto; max-width:min(100%,1600px); max-height:calc(100dvh - 190px); object-fit:contain; }
.ap-visio figcaption{ display:grid; gap:6px; justify-items:center; text-align:center; max-width:60ch; font-size:.9375rem; line-height:1.4; }
.ap-visio__num{ color:var(--jaune); }
.ap-visio__btn{ position:absolute; display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid rgba(246,243,236,.4); background:var(--noir); color:var(--creme); cursor:pointer;
  transition:background-color var(--t-survol) var(--sortie), color var(--t-survol) var(--sortie), border-color var(--t-survol) var(--sortie); }
.ap-visio__btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.ap-visio__btn:hover, .ap-visio__btn:focus-visible{ background:var(--jaune); border-color:var(--jaune); color:var(--noir); }
.ap-visio__btn:focus-visible{ outline:2px solid var(--creme); outline-offset:3px; }
.ap-visio__fermer{ top:16px; right:16px; }
.ap-visio__prec{ bottom:20px; left:calc(50% - 56px); }
.ap-visio__suiv{ bottom:20px; left:calc(50% + 8px); }
@media (min-width:64em){
  .ap-visio__fig{ padding:56px 112px; }
  .ap-visio__fig img{ max-height:calc(100dvh - 170px); }
  .ap-visio__prec, .ap-visio__suiv{ bottom:auto; top:calc(50% - 24px); }
  .ap-visio__prec{ left:32px; }
  .ap-visio__suiv{ left:auto; right:32px; }
  .ap-visio__fermer{ top:28px; right:32px; }
}
html:has(.ap-visio[open]){ overflow:hidden; }

/* =============== 3. CE QUE JE FAIS : fond blanc =============== */
.ap-faire{ background:var(--blanc); color:var(--noir); overflow:hidden; }
/* Le tableau : la photo du tournage au centre, les métiers éparpillés autour, chacun de travers,
   comme des notes posées à la main sur une planche. */
.ap-tableau{ display:grid; gap:var(--s-6); margin-top:var(--s-6); }
.ap-tableau__photo{ margin:0; rotate:-1.5deg; box-shadow:0 18px 40px -18px rgba(35,31,32,.45); }
.ap-tableau__photo img{ width:100%; height:auto; display:block; }
/* Téléphone : blocs étroits, posés dans une zone en retrait, très espacés : chaque ovale tient dans l'écran
   et ne touche pas son voisin. */
.ap-mots{ display:grid; gap:var(--s-7); }
.ap-mot{ position:relative; display:grid; gap:6px; width:fit-content; max-width:20rem; outline:none; }
.ap-mot b{ justify-self:start; font:900 var(--ap-h3)/1.05 var(--ff-title); letter-spacing:-.015em; }
.ap-mot span{ font-size:var(--ap-txt); line-height:1.5; color:rgba(35,31,32,.78); }
/* Au survol, le texte grossit un peu pendant que l'ovale se dessine (depuis son côté d'alignement). */
.ap-mot b, .ap-mot span{ transform-origin:0 50%; transition:scale 450ms var(--sortie); }
.ap-mot--2 :is(b,span), .ap-mot--4 :is(b,span), .ap-mot--p2 :is(b,span){ transform-origin:100% 50%; }
.ap-mot--5 :is(b,span){ transform-origin:50% 50%; }
@media (hover:hover){ .ap-mot:hover :is(b,span), .ap-mot:focus-visible :is(b,span), .ap-mot:focus-within :is(b,span){ scale:1.05; } }
/* Téléphone : les métiers se répondent d'un côté à l'autre, chacun avec sa petite inclinaison. */
.ap-mot--1{ rotate:-2deg; }
.ap-mot--2{ justify-self:end; text-align:right; rotate:2deg; }
.ap-mot--2 b{ justify-self:end; }
.ap-mot--3{ rotate:-1deg; }
.ap-mot--4{ justify-self:end; text-align:right; rotate:-2.5deg; }
.ap-mot--4 b{ justify-self:end; }
.ap-mot--5{ justify-self:center; text-align:center; rotate:1.5deg; }
.ap-mot--5 b{ justify-self:center; }
/* L'entourage à la craie : un trait tracé à la main, qui se dessine autour du métier au survol. */
/* L'entourage est un ovale tracé à main levée. js/apropos.js le calcule d'après la taille réelle du bloc :
   l'ovale passe au-delà des coins du texte avec au moins 12 px de marge, il ne touche jamais les lettres.
   Sa position et sa taille sont donc posées par le script. */
.ap-craie{ position:absolute; left:0; top:0; width:0; height:0;
  overflow:visible; pointer-events:none; filter:url(#ap-rugueux); }
/* Pas de vector-effect ici : il ferait calculer les tirets en pixels et le trait ne serait jamais caché. */
.ap-craie path{ fill:none; stroke:var(--bleu); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  transition:stroke-dashoffset 260ms var(--sortie), opacity 0s linear 260ms; }   /* caché : sinon le bout arrondi du trait reste en point */
.ap-mot:hover .ap-craie path, .ap-mot:focus-visible .ap-craie path{ stroke-dashoffset:0; opacity:1; transition:stroke-dashoffset 700ms var(--sortie), opacity 0s; }
.ap-mot--1 path{ --n:1; } .ap-mot--2 path{ --n:2; } .ap-mot--3 path{ --n:3; } .ap-mot--4 path{ --n:4; } .ap-mot--5 path{ --n:5; }
/* Ordinateur : la photo au milieu, deux métiers à gauche, deux à droite, le dernier sous la photo. */
@media (min-width:64em){
  .ap-tableau{ margin-right:calc(var(--gut) - var(--nav-reserve)); grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr); grid-template-rows:auto minmax(3rem,1fr) auto auto; column-gap:clamp(3rem,4.5vw,5rem); padding-top:1rem; }
  .ap-tableau .ap-mot b{ font-size:clamp(1.3rem,1.6vw,2.2rem); }
  .ap-tableau__photo{ grid-column:2; grid-row:1 / 4; align-self:center; }
  .ap-mots{ display:contents; }
  .ap-mot{ margin:0; max-width:13rem; }
  .ap-mot--1{ grid-column:1; grid-row:1; align-self:start; justify-self:start; margin:3.4vw 0 0 calc(2rem + .5vw); }
  .ap-mot--3{ grid-column:1; grid-row:3; align-self:end; justify-self:end; margin-right:1.5rem; }
  .ap-mot--2{ grid-column:3; grid-row:1; align-self:start; justify-self:start; margin-top:2rem; }
  .ap-mot--4{ grid-column:3; grid-row:3; align-self:end; justify-self:start; margin-left:1.5rem; }
  .ap-mot--5{ grid-column:2; grid-row:4; margin-top:3.25rem; }
}
.ap-bref{ display:grid; gap:var(--s-5); justify-items:start; margin-top:clamp(3.5rem,7vw,6rem); }
/* Même taille pour « Bref, si ça bouge… » et « Cette approche… ». */
.ap-bref__txt{ font-size:clamp(1.6rem,min(2.4vw + .5rem, 5.3svh),3rem); line-height:1.08; color:var(--bleu); max-width:30ch; text-wrap:balance; }

/* =============== 4. EN ÉQUIPE : fond bleu, les partenaires éparpillés comme les métiers =============== */
.ap-equipe{ background:var(--bleu); color:var(--blanc); overflow:hidden; padding-block:clamp(2.5rem,4vw,3.5rem); }
.ap-equipe__in{ display:grid; gap:var(--s-7); }
.ap-equipe__tete{ display:grid; gap:var(--s-5); align-content:start; }
.ap-partenaires{ display:grid; gap:var(--s-7); }
.ap-equipe .ap-mot{ max-width:22rem; }
.ap-equipe .ap-mot span{ color:rgba(255,255,255,.85); }
.ap-equipe .ap-mot b{ color:var(--jaune); }
.ap-mot--p1{ rotate:-2deg; }
.ap-mot--p2{ justify-self:end; text-align:right; rotate:2deg; }
.ap-mot--p2 b{ justify-self:end; }
.ap-mot--p3{ rotate:-1.5deg; }
/* Le nom du partenaire mène à son site (pas d'entourage à la craie sur les partenaires). */
.ap-mot__lien{ color:inherit; text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.16em; }   /* souligné : on comprend que c'est un lien */
.ap-mot__lien:focus-visible{ outline:3px solid var(--jaune); outline-offset:6px; border-radius:2px; }
.ap-equipe__fin{ color:var(--blanc); }
@media (min-width:64em){
  /* Le titre sur toute la largeur, puis les deux partenaires de part et d'autre, décalés en hauteur. */
  /* Sur ordinateur, la section fait exactement la hauteur de l'écran ; le contenu est centré dedans,
     avec le même écart au-dessus et au-dessous du bloc des partenaires. */
  .ap-equipe{ min-height:100svh; display:flex; align-items:center; }
  .ap-equipe__in{ width:100%; row-gap:clamp(1.25rem,3.5svh,3rem); }
  .ap-equipe{ padding-block:clamp(1.5rem,4svh,3.5rem); }
  .ap-partenaires{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(4rem,7vw,7rem); padding:1.75rem 6rem 1.75rem 2.5rem; }
  .ap-equipe .ap-mot{ max-width:15.5rem; }
  .ap-mot--p1{ align-self:start; }
  .ap-mot--p2{ justify-self:start; text-align:left; margin:2.75rem 0 0 calc(-6% - 6vw + max(0px, (90rem - 100vw) * .35)); }
  .ap-mot--p2 b{ justify-self:start; }
  .ap-equipe .ap-mot--p3{ grid-column:1; align-self:start; margin-top:-4rem; max-width:17rem; }   /* lecture en S : gauche, droite, gauche ; 17rem : « AGENCE FIVE 5 » tient sur une ligne */
}

/* =============== 5. RÉFÉRENCES : fond bleu pâle =============== */
.ap-refs{ background:var(--bleu-pale); color:var(--noir); }
.ap-refs .ap-h2{ margin-bottom:var(--s-7); }
/* Une grille à filets bleus : le fond de la liste passe dans l'espace d'un pixel entre les cases. */
.ap-logos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(0,124,193,.3); border:1px solid rgba(0,124,193,.3); }
.ap-logos li{ display:grid; place-items:center; aspect-ratio:2 / 1; background:var(--bleu-pale); padding:12px; }
/* Le volet qui découvre chaque case est bleu, pas noir. */
.ap-logos .volet::after{ background:var(--bleu); animation-delay:0s !important; }   /* toutes les cases d'un coup */
/* Les logos arrivent en couleur sur fond transparent : brightness(0) les passe tous en noir, pour une grille homogène. */
.ap-logos img{ max-width:62%; max-height:clamp(1.9rem,3vw,2.6rem); width:auto; height:auto; filter:brightness(0); opacity:.85; }
.ap-logos img.ap-logo--haut{ max-height:clamp(2.8rem,4.4vw,3.8rem); }
.ap-logos__toi a{ font:900 1.25rem/1 var(--ff-title); text-transform:uppercase; color:var(--bleu); text-decoration:none;
  display:grid; place-items:center; width:100%; height:100%; transition:color var(--t-survol) var(--sortie), background-color var(--t-survol) var(--sortie); }
.ap-logos__toi{ padding:0; }
.ap-logos__toi a:hover, .ap-logos__toi a:focus-visible{ background:var(--jaune); color:var(--noir); }
.ap-logos__toi a:focus-visible{ outline:3px solid var(--bleu); outline-offset:-3px; }
@media (min-width:48em){ .ap-logos{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* =============== 6. ET LA SUITE ? : bande noire =============== */
/* Le texte à gauche ; le portrait en grand, calé dans le coin bas droit de la section, l'astérisque près de la tête. */
.ap-suite{ --pw:min(88vw,420px); position:relative; overflow:hidden; background:var(--noir); color:var(--creme);
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:none; min-height:0; }
.ap-suite__cote{ writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; gap:10px; justify-content:flex-end;
  padding:var(--gap-top) clamp(12px,2vw,28px); border-right:1px solid rgba(246,243,236,.25); color:var(--creme); white-space:nowrap; }
.ap-suite__cote i{ width:10px; height:10px; background:var(--jaune); }
.ap-suite__in{ display:grid; grid-template-columns:minmax(0,1fr); padding:clamp(3rem,5vw,4.5rem) var(--gut) 0; }
.ap-suite__txt{ display:grid; gap:var(--s-4); justify-items:start; max-width:44ch; }
.ap-suite__title{ color:var(--jaune); margin-bottom:var(--s-5); }
.ap-suite__txt p{ font-size:clamp(1.125rem,.4vw + 1rem,1.3rem); line-height:1.55; }
.ap-suite__txt .stamp{ margin-top:var(--s-6); }
.ap-suite__side{ position:relative; justify-self:end; width:var(--pw); margin:var(--s-7) calc(var(--gut) * -1) 0 0; }
.ap-suite__pic{ margin:0; }
.ap-suite__pic img{ display:block; width:100%; height:auto; }
/* Le sceau : texte en anneau, fixe ; seul l'astérisque du centre tourne (la rotation de l'accueil). */
.ap-sceau{ position:absolute; z-index:1; top:2%; left:-4%; width:clamp(120px,14vw,220px); aspect-ratio:1; }
.ap-sceau__anneau{ position:absolute; inset:0; width:100%; height:100%; fill:var(--creme);
  font:700 13.5px/1 var(--ff-title); letter-spacing:.1em; text-transform:uppercase; }
.ap-sceau .ap-sceau__aster{ position:absolute; inset:25%; width:auto; height:auto; margin:0; color:var(--jaune); }
/* L'anneau tourne dans le sens horaire, l'astérisque en sens inverse, à la même vitesse (18 s par tour). */
.ap-sceau__anneau{ animation:tourne 18s linear infinite; }
.ap-sceau .ap-sceau__aster svg{ animation-direction:reverse; }
.ap-suite.is-off .ap-sceau__anneau{ animation-play-state:paused; }
/* L'astérisque apparaît en grandissant depuis rien, une fois le sceau posé. */
.ap-suite.play .ap-sceau__aster{ animation:ap-eclot 900ms var(--sortie) both; animation-delay:calc(var(--t-decal) * 7); }
@keyframes ap-eclot{ from{ transform:scale(0); } to{ transform:none; } }
.ap-suite.is-off .ch--aster svg{ animation-play-state:paused; }
@media (min-width:64em){
  /* Le portrait est sorti du flux : la section garde assez de hauteur pour lui, le texte s'arrête avant. */
  /* « Et la suite ? » + pied de page = exactement un écran (--foot-h est mesuré par js/accueil.js).
     Le portrait prend la plus grande taille qui tient dans cette hauteur. */
  .ap-suite{ --h:calc(100svh - var(--foot-h, 0px)); --pw:min(52vw, 780px, (var(--h) + 2rem) / 1.1); height:var(--h); min-height:0; }
  .ap-suite__in{ padding-right:calc(var(--pw) + var(--s-5)); }
  .ap-suite__txt{ padding-bottom:var(--pad-y); }
  .ap-suite__side{ position:absolute; right:0; bottom:0; margin:0; }
  /* Le sceau, posé dans l'espace entre le texte et le portrait (centre à ~52 % de la largeur, ~21 % de la hauteur). */
  .ap-sceau{ --sw:clamp(120px,14vw,220px); width:var(--sw);
    top:calc(var(--h) * .21 - (var(--h) - var(--pw) * 1.1) - var(--sw) / 2); left:calc(52vw - (100vw - var(--pw)) - var(--sw) / 2); }
}

/* Pied de page clair sur cette page : il se détache de la bande noire au-dessus. */
/* Pied de page noir, séparé de la bande « Et la suite ? » par un filet blanc. */
.foot{ border-top:1px solid var(--blanc); }

/* =============== Traits à main levée autour des portraits =============== */
/* Trois passages au marqueur qui suivent la silhouette (calculés et animés par js/apropos.js d'après la
   transparence de l'image). Bleu Fitou sur l'affiche, blanc sur « Et la suite ? ». Ils montent avec la photo. */
.ap-traits{ position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ap-traits path{ fill:none; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
.ap-traits--hero path{ stroke:var(--bleu); stroke-width:6; stroke-linejoin:round; }
.ap-traits--suite path{ stroke:var(--blanc); stroke-width:5; stroke-linejoin:round; }
@keyframes ap-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* ---------- Avant l'entrée ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .ap-hero:not(.play) :is(.ap-pic, .ap-traits--hero), .js .ap-suite:not(.play) :is(.ap-suite__pic, .ap-traits--suite){ transform:translateY(105%); }
  .js .ap-hero:not(.play) .ap-aplat{ transform:scaleY(0); }
  .js .ap-suite:not(.play) .ap-sceau__aster{ transform:scale(0); }
  .js [data-play]:not(.play) .ap-film__bande{ transform:translateX(-100%); }
}
/* La photo agrandie s'ouvre en se posant, sans traîner. */
.ap-visio[open] .ap-visio__fig{ animation:ap-ouvre 420ms var(--sortie) both; }
@keyframes ap-ouvre{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .play :is(.ap-pic, .ap-traits, .ap-suite__pic), .play .ap-aplat, .play .ap-film__bande, .ap-visio[open] .ap-visio__fig, .ap-sceau__anneau, .ap-suite.play .ap-sceau__aster{ animation:none; }
  .ap-vue img, .ap-craie path, .ap-mot b, .ap-mot span{ transition:none !important; }
  .ap-sticker__in{ animation:none; }
}

/* Téléphone court : le portrait rend un peu de hauteur, l'affiche tient dans l'écran. */
@media (max-width:47.99em) and (max-height:46em){
  .ap-hero{ grid-template-rows:auto auto auto minmax(38svh,1fr); --tfs:calc((100vw - 2 * var(--edge)) / 5.4); }
}