/* Habillage « 2-apple » des pages outil, chargé APRÈS systeme.css (qui reste à e0, intact).
   Décision d'Ismael, 28/09/2026 21h19 : tout le site au style de la maquette 2-apple (registre 1159).
   Valeurs : design/jetons-apple.css (f90b3a02), recopiées ici à l'identique ; composants : maquette
   ~/.claude/handover/2026-09-28-connexion/reference/2-apple.html (boutons, titres, cartes, pied).
   Principe : redéfinir les variables de systeme.css, puis corriger ce qu'elles ne couvrent pas. */
:root{
  --bg:#ffffff; --stage:#f5f5f7; --stage-2:#ebebef;
  --ink:#1d1d1f; --ink-2:#56565b; --ink-3:#86868b;
  --line:rgba(29,29,31,.08);
  --accent:#0071e3; --accent-press:#0062c4;
  --r-card:28px; --r-in:18px;
  --shadow-s:0 1px 2px rgba(29,29,40,.05),0 8px 24px rgba(29,29,40,.05);
  --shadow-m:0 1px 2px rgba(29,29,40,.05),0 24px 60px rgba(29,29,40,.08);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font:"Geist",system-ui,-apple-system,sans-serif;

  /* variables de systeme.css, remappées */
  --background:#ffffff;
  --secondary-background:#f5f5f7;
  --foreground:#1d1d1f;
  --main-foreground:#ffffff;
  --main:#0071e3;
  --border:rgba(29,29,31,.08);
  --border-radius:18px;
  --box-shadow-x:0px; --box-shadow-y:0px;
  --shadow:0 1px 2px rgba(29,29,40,.05),0 8px 24px rgba(29,29,40,.05);
  --heading-font-weight:600; --base-font-weight:400;
  --c2:#f5f5f7; --c3:#ebebef; --c4:#f5f5f7;
}

/* texte */
html,body{background:var(--bg)!important;background-image:none!important;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
body *{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font);font-weight:600;color:var(--ink);letter-spacing:-.035em;text-wrap:balance}
h1{letter-spacing:-.045em;line-height:1.14}
.lead,p.lead{color:var(--ink-2);font-weight:400}
.eyeb{color:var(--accent);background:none;border:0;box-shadow:none;font-weight:600;letter-spacing:0;text-transform:none}

/* boutons : pilule, accent unique, ombre diffuse teintée */
.btn{border:0!important;border-radius:999px!important;background:var(--accent)!important;color:#fff!important;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(0,113,227,.25),0 10px 28px rgba(0,113,227,.22)!important;transition:transform .35s var(--ease-out),background .2s,box-shadow .35s var(--ease-out)}
.btn:hover{background:var(--accent-press)!important;transform:none}
.btn:active{transform:scale(.97)!important;transition:transform .1s ease-out}
.btn.n{background:var(--stage)!important;color:var(--ink)!important;box-shadow:none!important}
.btn.n:hover{background:var(--stage-2)!important}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(0,113,227,.45);outline-offset:3px}

/* cartes et cadres : plus de bord noir ni d'ombre dure */
.card,.fen,.po-ecran,.po-carte-libre,.op-cartes>*,.stp-cat,.cas,.duo>*,.final,.note,.tag,.op-chip,.po-trio>*{border-color:transparent!important}
.card,.fen,.po-ecran,.po-carte-libre,.cas,.note{background:var(--stage)!important;border-radius:var(--r-card)!important;box-shadow:none!important}
.final{background:var(--stage)!important;border-radius:var(--r-card)!important;box-shadow:none!important}
figure.ic img,.ic img,img.ic{border:0!important;border-radius:var(--r-in)!important;box-shadow:var(--shadow-m)!important}
.tag,.op-chip{border-radius:999px!important;background:var(--stage)!important;color:var(--ink-2)!important;box-shadow:none!important}

/* navigation et pied : verre et filet */
.barre,header.barre{background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line)!important;box-shadow:none!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.barre,header.barre{background:rgba(255,255,255,.97)!important}}
.menu .volet{border:0!important;border-radius:var(--r-in)!important;box-shadow:var(--shadow-m)!important;background:#fff!important}
footer{background:var(--bg)!important;border-top:1px solid var(--line)!important;color:var(--ink-2)}
footer a{color:var(--ink-2)}
.eyeb{color:var(--accent-press)}
.op-ui figcaption{opacity:1;color:var(--ink-2)!important}

@media (prefers-reduced-motion:reduce){.btn{transition:none}}
@media (prefers-reduced-transparency:reduce){.barre,header.barre{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ── règles générales (28/09 21h45) : l'habillage néo-brutaliste codé en dur dans 85 ombres et 25 rotations ── */
body *:not(.btn){box-shadow:none!important}
body *{border-color:var(--line)!important}
figure img,.ic img,img.ic,.planche img,.po-sortie img,.po-recompo img{box-shadow:var(--shadow-m)!important;border-radius:var(--r-in)}
figcaption{background:transparent!important;color:var(--ink-2)!important;font-weight:500;text-transform:none;letter-spacing:0}
h1 mark,h1 .mark{background:none!important;color:var(--accent)!important;transform:none!important;padding:0!important;box-decoration-break:slice}
.lead,.hero p,section p{background:transparent!important}
/* plus aucune figure inclinée : le style Apple pose tout à plat */
.logo em,
.op-cartes figure,
.op-tri .sg,
.po-ba-hero,
.po-bientot,
.po-ecran-hero .fen,
.po-fleche,
.po-hero-ba figure:first-child,
.po-hero-ba figure:last-child,
.po-paire .fl,
.po-phrase-hero .po-fleche,
.po-phrase-hero figure,
.po-pip .ins,
.po-planche-hero .eventail img.rond,
.po-planche-hero .eventail img:nth-child(1),
.po-planche-hero .eventail img:nth-child(2),
.po-planche-hero .eventail img:nth-child(3),
.po-planche-hero .po-fleche,
.po-planche-hero .src,
.po-recompo .po-fleche,
.po-trio figure:nth-of-type(1),
from,
h1 mark{transform:none!important;rotate:none!important}

/* ── corrections après capture (28/09 22h05) ── */
p.sub{background:transparent!important;border-radius:0!important}
h1 mark,h1 .mark{border:0!important}
section{border-top-width:0!important;border-bottom-width:0!important}
/* photos avec légende posée dessus : cadre arrondi, plus de fond noir, légende en verre lisible */
.po-pip{background:transparent!important;border:0!important;border-radius:var(--r-card)!important;overflow:hidden}
.po-pip>img{border-radius:0!important;box-shadow:none!important}
.po-pip figcaption{background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  color:var(--ink)!important;border:0!important;border-radius:999px!important;font-weight:600;padding:14px 18px!important;line-height:1.25}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.po-pip figcaption{background:#fff!important}}
/* figure mise en avant (aplat rose) : fond gris clair, légende lisible */
figure.r{background:var(--stage)!important}
figure.r figcaption{color:var(--ink)!important}
/* le bloc final était blanc sur rose : sur fond gris clair, son texte passe à l'encre */
.final h2,.final h3,.final p,.final .lead,.final li{color:var(--ink)!important}
.final .lead,.final p{color:var(--ink-2)!important}
/* bouton secondaire : blanc sur les sections grises, gris sur les blanches */
.btn.n{background:#fff!important;color:var(--ink)!important;box-shadow:var(--shadow-s)!important}
section:not(.f1) .btn.n{background:var(--stage)!important;box-shadow:none!important}
/* liens dans le texte : l'accent, pas le bleu du navigateur */
main p a:not(.btn),section p a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* flèches décoratives : visibles sur fond gris */
.po-fleche,.fleche,.fl{color:var(--ink-3)!important}
/* cadre des animations de page (Photo Produit, Planches) : plus de bord noir ni d’ombre dure, la scène claire */
.po-anim{border:0!important;border-radius:var(--r-card)!important;box-shadow:none!important;background:var(--stage)!important}
/* animation propre de chaque page outil (29/09, une horloge seek(s), fichiers anim/<outil>/effect-apple.html) : 16:9 à l'ordinateur, 4:5 au téléphone */
.anim-outil{display:block;width:100%;aspect-ratio:16/9;border:0;margin-top:28px;background:transparent}
@media(max-width:760px){.anim-outil{aspect-ratio:9/16}} /* 9:16 à la demande d'e0 (29/09 03h08) : ses légendes restent à 11 px au lieu de 7-8 */
/* recette /test-pro-ui-ux du 29/09 03h51 : le fond gris posé par ce style exige une marge intérieure (gate_marges, 12 px) */
.note{padding:16px 22px!important}
.cas{padding:18px 18px 22px!important}
.po-film figcaption{padding-top:12px!important;padding-bottom:12px!important}
.po-bientot{padding:12px 16px!important}
/* filtres du Cloneur de Stories : entre 420 et 520 px, « Détendu » restait seul sur sa ligne (gate_mise_en_page, PETITE PLAGE) */
@media (max-width:520px){.op-chips{max-width:340px;margin-left:auto!important;margin-right:auto!important}} /* 3 + 2 au lieu de 4 + 1 */
.surligne{background:linear-gradient(transparent 58%,rgba(0,113,227,.2) 58%,rgba(0,113,227,.2) 90%,transparent 90%);padding:0 .08em;border-radius:3px}
.entoure{position:relative;white-space:nowrap;display:inline-block}
.entoure::after{content:"";position:absolute;inset:-.14em -.28em;border:2.5px solid #0071e3;border-radius:52% 44% 56% 46%/58% 48% 52% 44%;transform:rotate(-2.5deg);pointer-events:none}
.fleche.rond{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1px 2px rgba(29,29,40,.08),0 10px 26px rgba(29,29,40,.16);font-size:0;flex:none}
.op-ba.op-ba-cc{max-width:min(400px,100%)!important;margin-inline:auto!important;max-height:78vh}
/* logos et emojis en arrière-plan (consigne d'Ismael 18h03 · 8) : dans les marges, halo à la couleur de la marque, lente flottaison */
.deco-el{position:absolute;z-index:0;pointer-events:none;display:none;animation:deco-flotte 8s ease-in-out infinite alternate}
.deco-g{left:max(8px,calc((100vw - 1300px)/4 - 15px))}.deco-d{right:max(8px,calc((100vw - 1300px)/4 - 15px))} /* au milieu de la marge laissée par .w (1300 px) */
.deco-logo{width:56px;height:56px;border-radius:17px;background:#fff;box-shadow:0 0 0 1px var(--halo-l),0 12px 28px -8px var(--halo-f),0 0 34px 4px var(--halo-d);display:none;place-items:center}
.deco-logo svg,.deco-logo img{width:30px;height:30px;display:block;border-radius:6px}
.deco-emoji{font-size:34px;filter:drop-shadow(0 6px 14px rgba(0,113,227,.25));opacity:.85}
@keyframes deco-flotte{from{transform:translate(0,0) rotate(-4deg)}to{transform:translate(var(--dx,8px),-14px) rotate(4deg)}}
@media (min-width:1400px){.deco-el{display:block}.deco-logo{display:grid}} /* en dessous, pas de marge libre : rien, pour ne jamais gêner la lecture */
@media (prefers-reduced-motion:reduce){.deco-el{animation:none}}
/* le halo des logos passe malgré « body :not(.btn){box-shadow:none!important} » plus haut dans ce fichier */
body .deco-el.deco-logo{box-shadow:0 0 0 1px var(--halo-l),0 12px 28px -8px var(--halo-f),0 0 34px 4px var(--halo-d)!important}
/* figure.ic héritait de systeme.css le fond var(--main), devenu le rose d'accent : légende grise sur rose illisible (Cloneur de Miniature, vu le 30/09 00h20) */
figure.ic{background:#fff!important}
figure.ic figcaption{color:var(--ink)!important}
/* consigne d'Ismael 17h30 · 6 : images +20 à 30 % tant qu'elles tiennent dans l'écran ; les bandes du haut de page (op-cartes) étaient les seules bridées par une hauteur fixe */
@media (min-width:900px){.op-cartes img{height:max(var(--oph,256px),min(calc(var(--oph,256px) * 1.22),19.5vw))!important}} /* agrandie jusqu'à ce que la rangée tienne (5 slides 4:5 à 1440 px), jamais sous la taille d'origine */
/* consigne d'Ismael 18h03 · 3 : un texte qui se lit en diagonale (gras = à retenir, italique = précision, listes courtes) */
.sub b,.lead b,.w p b,.pt p b{font-weight:650;color:var(--ink)}
.sub em,.lead em,.w p em{font-style:italic;color:var(--ink-2)}
.liste-scan{list-style:none;margin:18px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2)}
.liste-scan li{display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(29,29,40,.06)!important}
.liste-scan li::before{content:"✕";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--stage);color:var(--accent);font-size:12px;font-weight:700}
@media (max-width:520px){.liste-scan{font-size:15px}.liste-scan li{max-width:100%;text-align:left}} /* une pastille longue passe à la ligne plutôt que de déborder (Retouche, 396 px pour 375) */
@media (max-width:900px){.liste-scan{flex-direction:column;align-items:center}} /* 2 + 1 cassait la rangée à 768 px */
/* recette du 30/09 15h50 : --main est devenu le framboise, et pages-outils.css y posait encore un texte sombre (contraste 1,4 à 4,0 : .fmt du Mode Libre, bloc « Ce qui change » du Clone ID, onglet choisi de Photo Produit, pastilles numérotées de Retouche) ; en blanc : 5,2 */
.po-carte-libre .fmt,.po-change,.po-change *,.po-etal [role=tab][aria-selected=true],.po-film figcaption b{color:var(--main-foreground)!important}
/* la ligne « figcaption{background:transparent} » effaçait aussi les étiquettes posées SUR la photo (« Ce qui est arrivé », « L'originale », « Refaite ») : même verre dépoli que .po-pip */
.po-hero-ba figcaption,.po-phrase-hero figcaption{background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  color:var(--ink)!important;border:0!important;border-radius:999px!important;font-weight:600;padding:8px 12px!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.po-hero-ba figcaption,.po-phrase-hero figcaption{background:#fff!important}}
/* recette du 30/09 16h05 : à côté d'une capture haute (Photo Produit 653 px, Miniature 689 px), les points restaient en haut et laissaient 330 à 360 px de vide dessous ; centrés sur la hauteur de la capture */
@media (min-width:761px){.po-ecran:not(.po-ecran-large) .pts{align-self:center}}
/* 04/10 (9e) : à 320 px, le bouton de prix du menu sortait de la pastille (13 px avec « 790 €/an », 1 px avant) ; on resserre le menu sur les très petits écrans */
@media (max-width:360px){nav .w{gap:8px;padding:0 14px}nav .btn{padding:0 11px;font-size:13px}nav .logo{font-size:15px}}

.nav-panneau{display:contents}
.nav-burger{display:none}
@media (max-width:1080px){
  nav .w > .btn:not(.n){margin-left:auto;flex:none;white-space:nowrap}   /* le prix ne passe jamais sur deux lignes (« Dès / 49 € », mesuré à 390 px avant ce correctif) */
  nav .nav-burger{display:inline-flex;order:1;flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-4px;border:0;border-radius:999px;background:none;cursor:pointer;color:var(--ink);transition:background .2s}
  nav .nav-burger:hover{background:rgba(29,29,31,.06)}
  nav .nav-burger span{display:block;position:relative;width:18px;height:1.8px;border-radius:2px;background:currentColor;transition:background .2s}
  nav .nav-burger span::before,nav .nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:1.8px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease-out)}
  nav .nav-burger span::before{top:-6px}
  nav .nav-burger span::after{top:6px}
  nav .nav-burger[aria-expanded="true"] span{background:transparent}
  nav .nav-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  nav .nav-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

  nav .nav-panneau{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:fixed;z-index:70;
    top:var(--nav-bas,88px);left:var(--nav-g,8px);right:var(--nav-d,8px);bottom:8px;max-width:none;
    padding:10px 12px 16px;overflow-y:auto;overscroll-behavior:contain;
    background:#fff;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-m);
    opacity:0;visibility:hidden;transform:translateY(-8px);transform-origin:100% 0;
    transition:opacity .25s var(--ease-out),transform .35s var(--ease-out),visibility .25s}
  nav.ouvert .nav-panneau{opacity:1;visibility:visible;transform:none}
  nav .nav-panneau .sp{display:none}
  nav .nav-panneau .menu{display:block}
  nav .nav-panneau .menu .dd,nav .nav-panneau a.l{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:52px;padding:0 8px;
    font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;border-radius:14px}
  nav .nav-panneau .menu .dd:hover,nav .nav-panneau a.l:hover{text-decoration:none;background:var(--stage)}
  nav .nav-panneau .menu .dd .chev{transform:none;transition:transform .35s var(--ease-out)}
  nav .nav-panneau .menu.ouvert .dd .chev{transform:rotate(180deg)}
  nav .nav-panneau .menu .volet{display:none;position:static;width:auto;margin:0;padding:0 0 8px;grid-template-columns:1fr;gap:2px;
    background:none!important;box-shadow:none!important;border-radius:0!important}
  nav .nav-panneau .menu .volet::before{content:none}
  nav .nav-panneau .menu.ouvert .volet{display:grid}
  nav .nav-panneau .menu .volet a{align-items:center;min-height:52px}
  nav .nav-panneau .btn.n{display:flex;justify-content:center;width:100%;min-height:52px;margin-top:10px;font-size:17px}
}
@media (max-width:480px){nav .w{gap:8px;padding:0 16px}nav .logo{font-size:15px;white-space:nowrap}}   /* logo + prix + bouton sur une ligne (taille du logo de l'accueil à 390 px) ; 480 et non 430 : à 431 px « /mois » revient et le bouton débordait de 11 px (balayage du 09/10) */
@media (max-width:370px){nav .w{gap:6px;padding:0 10px}nav .logo{font-size:13px}nav .nav-burger{width:40px}}   /* 320 px : idem ; 370 et non 360 : à 361 px le bouton débordait de 4 px */
@media (prefers-reduced-motion:reduce){
  nav .nav-panneau{transform:none;transition:opacity .2s linear,visibility .2s}
  nav .nav-burger span::before,nav .nav-burger span::after,nav .nav-panneau .menu .dd .chev{transition:none}
}
@media (prefers-reduced-transparency:reduce){nav .nav-panneau{box-shadow:inset 0 0 0 1px var(--line)}}