/* ════════════════════════════════════════════════════════════════════════
SYSTÈME REPRIS VERBATIM de neobrutalism.dev (MIT)
src/styling/globals.css, valeurs non modifiees :
--border-radius 5px · --box-shadow-x/y 4px
--heading-font-weight 700 · --base-font-weight 500
bordure 2px · au survol : translate(4px,4px) + shadow:none
@keyframes marquee / marquee2 : leurs keyframes, verbatim
SEULE la teinte --main change. C'est ce que leur documentation prévoit.
Rien n'est inventé ici : voir templates/neobrutalism/.../styling/globals.css
════════════════════════════════════════════════════════════════════════ */
:root{
--border-radius:5px; --box-shadow-x:4px; --box-shadow-y:4px;
--heading-font-weight:700; --base-font-weight:500;
--background:oklch(93.46% 0.0304 254.32);
--secondary-background:oklch(100% 0 0);
--foreground:oklch(0% 0 0);
--main-foreground:oklch(0% 0 0);
--main:oklch(67.47% 0.1725 259.61); /* leur bleu d'origine */
--border:oklch(0% 0 0);
--overlay:oklch(0% 0 0 / .8);
--shadow:var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border);
--c2:oklch(86.03% 0.176 92.36); /* leur chart-3, jaune */
--c3:oklch(79.76% 0.2044 153.08); /* leur chart-4, vert */
--c4:oklch(67.28% 0.2147 24.22); /* leur chart-2, rouge */
}
:root[data-t="corail"]{ --main:oklch(63% 0.19 35); --background:oklch(95% 0.022 75);
--c2:oklch(84% 0.15 85); --c3:oklch(72% 0.13 200); --c4:oklch(60% 0.16 350); }
:root[data-t="citron"]{ --main:oklch(88% 0.19 100); --background:oklch(95.5% 0.02 250);
--c2:oklch(70% 0.2 20); --c3:oklch(72% 0.16 260); --c4:oklch(64% 0.19 150); }
:root[data-t="menthe"]{ --main:oklch(79.76% 0.2044 153.08); --background:oklch(95% 0.03 150);
--c2:oklch(86% 0.176 92); --c3:oklch(67% 0.21 24); --c4:oklch(66% 0.18 277); }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--background);color:var(--foreground);
font-family:Archivo,system-ui,-apple-system,sans-serif;font-weight:var(--base-font-weight);
overflow-x:hidden}
h1,h2,h3,h4{font-weight:var(--heading-font-weight);line-height:1.03;letter-spacing:-.035em}
img{display:block;max-width:100%}
.w{max-width:1300px;margin:0 auto;padding:0 24px} /* leur --spacing-container */
section{padding:74px 0}
section.tight{padding:44px 0}
/* ── leurs primitives ─────────────────────────────────────────────── */
.card{background:var(--secondary-background);border:2px solid var(--border);
border-radius:var(--border-radius);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
padding:0 24px;font-family:inherit;font-weight:700;font-size:15.5px;cursor:pointer;
text-decoration:none;text-align:center;
background:var(--main);color:var(--main-foreground);
border:2px solid var(--border);border-radius:var(--border-radius);box-shadow:var(--shadow);
transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(var(--box-shadow-x),var(--box-shadow-y));box-shadow:none}
.btn.n{background:var(--secondary-background);color:var(--foreground)}
.btn.big{min-height:62px;font-size:18px;padding:12px 34px} /* [27/09 A10] libelle sur 2 lignes : 11 px au gate ; 1 ligne : min-height gouverne, rendu inchange */
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
padding:7px 15px;background:var(--c2);color:#000;
border:2px solid var(--border);border-radius:var(--border-radius);box-shadow:var(--shadow)}
.eyeb{display:inline-block;font-size:12.5px;font-weight:900;text-transform:uppercase;
letter-spacing:.13em;background:var(--c3);color:#000;padding:6px 13px;
border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:3px 3px 0 var(--border);margin-bottom:20px}
/* leur image-card, verbatim : bordure 2px, bg-main, légende border-t-2 */
figure.ic{overflow:hidden;border:2px solid var(--border);border-radius:var(--border-radius);
background:var(--main);box-shadow:var(--shadow)}
/* LE CADRE DECIDE DE LA TAILLE, JAMAIS L'IMAGE.
Ismael, 08/09 14h55 : « ca ne depend pas de l'image que vous avez, ca depend
du cadre des images ». figure.ic n'avait AUCUNE regle sur ses images : chacune
sortait a sa taille native, d'ou les 547x680 a cote des 610x403 qu'il voyait.
Une hauteur fixe par grille, et object-fit:cover remplit le cadre sans
deformer. */
/* SES RATIOS, mesures sur la réf le 08/09 a 1440 px :
ses inspirations 191x256 ratio 0,75 VERTICAL (une personne)
ses outils 415x257 ratio 1,61 HORIZONTAL (un ecran)
sa 3e grille 248x138 ratio 1,80 HORIZONTAL
son bandeau 190x253 ratio 0,75 VERTICAL
Le SENS suit le SUJET : vertical pour une personne, horizontal pour un ecran.
Et chacune de ses quatre grilles est uniforme a l'image pres. */
/* Le cadre suit l'orientation de la grille (--ir, pose par le generateur).
Mesure du 08/09/2026 : 88 de nos 125 fichiers sont en portrait, et ce 1.61
les rognait tous de 53 % de leur hauteur — le visage passait a la coupe.
Chez la réf 77 % des images sont en portrait ; son CSS declare 84 fois 3/4
contre 25 fois 16/9. Le defaut passe a 1.78 : son paysage median mesure 1,79 sur 29 fichiers. */
figcaption small{font-size:12px} /* [28/09] small = font-size:smaller, soit 10,4 px sous une legende de 12,5 (outil-photo-produit) */
img{height:auto} /* [27/09 A10, controle 77f2dbb9] l'attribut height etire les images quand la grille reduit leur largeur ;
les familles cadrees (.mq img 264px, .eq, .renvoi, figure.ic…) regagnent leur hauteur par specificite (0,1,1) */
figure.ic img{display:block;width:100%;object-fit:cover;
aspect-ratio:var(--ir,1.78);object-position:center 30%}
figure.ic.portrait img,.eq figure img{aspect-ratio:.75}
figure.ic figcaption{border-top:2px solid var(--border);color:var(--main-foreground);
padding:13px 15px;font-size:14px;font-weight:700;line-height:1.35}
figure.ic figcaption small{display:block;font-weight:500;font-size:12.5px;opacity:.72;margin-top:3px}
/* ── barre de navigation ──────────────────────────────────────────── */
nav{border-bottom:4px solid var(--border);background:var(--secondary-background);
position:sticky;top:0;z-index:60}
nav .w{display:flex;align-items:center;gap:24px;height:80px}
.logo{font-weight:900;font-size:21px;letter-spacing:-.045em;white-space:nowrap}
.logo em{font-style:normal;background:var(--main);color:var(--main-foreground);
padding:2px 9px;border:2px solid var(--border);border-radius:var(--border-radius);
display:inline-block;transform:rotate(-2deg)}
nav a.l{color:var(--foreground);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
nav a.l:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2.5px}
nav .sp{margin-left:auto}
nav .btn{min-height:44px;padding:0 18px;font-size:14.5px}
@media(max-width:1080px){nav a.l{display:none}}
/* Sur telephone la nav poussait la PAGE a 514 px pour 390 de large : mesure du
08/09/2026, le bouton secondaire finissait a droite 514. Le logo mene deja a
l'accueil, donc le bouton « Retour » sort et le logo se resserre. */
@media(max-width:620px){
nav .w{gap:12px}
nav .btn.n{display:none}
.logo{font-size:17px}
nav .btn{padding:0 13px;font-size:13.5px}
}
/* ── premier écran ────────────────────────────────────────────────── */
h1{font-size:clamp(38px,6vw,76px);font-weight:900;max-width:19ch;margin:20px 0 22px;
line-height:1.3} /* [28/09] 1.24 : les fonds du mark se superposent aux mots de la ligne voisine (gate_marges, animations neutralisees, outil-shooting) ; 1.3 : 0 defaut */
h1 mark{background:var(--main);color:var(--main-foreground);padding:.06em 13px .1em;
border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:var(--box-shadow-x) var(--box-shadow-y) 0 var(--border);
display:inline-block;transform:rotate(-1.5deg);margin:.06em 0}
.sub{font-size:19.5px;max-width:56ch;line-height:1.55}
.sub+.sub{margin-top:14px}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;align-items:center}
.ss{font-size:13.5px;font-weight:700;opacity:.8}
/* l'équation en éventail : 3 slides source + ta marque + 3 slides rendues */
/* AUCUN DEFILEMENT LATERAL, a aucune largeur — Ismael, 08/09 14h08 :
« Il faut pas les mettre en slide, scroll de gauche a droite. » Les
vignettes se resserrent par paliers jusqu'a tenir (plus bas) ; le
retour a la ligne n'est qu'un filet qu'aucune largeur n'atteint,
mesure de 390 a 1440 px. Retirer ce scrollport libere aussi la
ViewTimeline de l'assemblage, qui se mesurait dedans et n'y bougeait
jamais : une timeline de vue se lit dans le conteneur qui defile. */
.eq{display:flex;gap:11px;margin-top:40px;align-items:center;flex-wrap:wrap;
padding:22px 2px 26px;scrollbar-width:none;justify-content:center}
.eq::-webkit-scrollbar{display:none}
/* Toutes les vignettes ont EXACTEMENT la meme taille : Ismael, 08/09 14h08,
« La taille des images n'est pas egale. Il faut qu'elles soient exactement
pareilles. » Le 4:5 est le format Instagram, et celui de la réf. */
.eq figure{flex:0 0 auto;position:relative;overflow:hidden;background:var(--secondary-background);
width:150px;height:188px;
border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:var(--box-shadow-x) var(--box-shadow-y) 0 var(--border);
transition:transform .18s ease,box-shadow .18s ease}
.eq figure:hover{transform:translate(6px,6px) rotate(0deg)!important;box-shadow:none;z-index:3}
.eq img{width:100%;height:100%;object-fit:cover}
.eq figcaption{position:absolute;right:7px;top:7px;font-size:12px;font-weight:900;
padding:4px 9px;background:var(--secondary-background);color:#000;
border:2px solid var(--border);border-radius:var(--border-radius);white-space:nowrap}
.eq figure.r figcaption{background:var(--main);color:var(--main-foreground)}
.eq figure.m figcaption{background:var(--c2)}
/* ── L'EQUATION SUR TELEPHONE — elle se resserre, elle ne defile pas ──
Ismael, 08/09 14h08 : « Il faut pas les mettre en slide, scroll de
gauche a droite. »
CE BLOC ETAIT ECRIT DEPUIS LE 08/09 ET NE S'APPLIQUAIT PAS. Il vivait
AVANT `.eq figure{width:150px}`, a specificite egale — et une requete
media n'ajoute AUCUNE specificite. La regle de base, plus bas dans le
fichier, gagnait donc toujours : mesure du 09/09 a 390 px, les
vignettes faisaient 150 px et le bloc 770 px pour 342 disponibles, sur
20 pages sur 22. Deplace ici, apres les regles de base, il gagne.
Le defilement lateral part aussi : un bloc qui tient n'a plus besoin
d'un scrollport, et c'est ce scrollport qui empechait l'assemblage de
suivre le defilement (une ViewTimeline se mesure dans le conteneur qui
defile, or celui-la ne defile jamais verticalement). */
@media(max-width:1200px){ .eq{gap:9px} .eq figure{width:118px;height:148px} }
@media(max-width:1000px){ .eq{gap:8px;--amp:.7} .eq figure{width:104px;height:130px} }
@media(max-width:860px){ .eq{gap:7px} .eq figure{width:96px;height:120px} }
@media(max-width:700px){
.eq{gap:6px;padding:16px 2px 20px;justify-content:center;--amp:.42}
.eq figure{width:88px;height:110px}
.eq figcaption{font-size:12px;padding:2px 5px;right:4px;top:4px;border-width:1.5px}
.op,.signe{font-size:24px;padding:0}
}
.op{align-self:center;font-size:42px;font-weight:900;flex:0 0 auto;padding:0 4px;line-height:1}
/* les trois chiffres */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
/* [Z-30, 14/09] « aucun espace respecté avec les encarts et le titre » :
la grille du procédé respire sous son h2, sur les 12 pages qui l'emploient. */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.b{padding:26px}
.b .n{width:44px;height:44px;display:grid;place-items:center;font-weight:900;font-size:18px;
background:var(--main);color:var(--main-foreground);
border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:3px 3px 0 var(--border);margin:30px 0 4px}
.b .ic{width:54px;height:54px;display:grid;place-items:center;font-size:26px;line-height:1; /* [27/09 A10] colle la line box de l'emoji aux glyphes : marge mesuree 11 → 14 px, rendu identique */
background:var(--c3);border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:3px 3px 0 var(--border);margin:30px 0 4px}
.b h3{font-size:19px;margin-bottom:9px;letter-spacing:-.02em}
.b p{font-size:14.5px;line-height:1.55}
.stat{padding:24px 26px}
.stat .v{font-size:44px;font-weight:900;letter-spacing:-.05em;line-height:1}
.stat .k{font-size:14.5px;margin-top:8px;line-height:1.4}
h2{font-size:clamp(31px,4.4vw,54px);font-weight:900;max-width:21ch}
.lead{font-size:17.5px;margin-top:16px;max-width:62ch;line-height:1.6}
.lead+.lead{margin-top:12px}
.src{font-size:12.5px;opacity:.66;margin-top:12px;line-height:1.5;max-width:66ch}
/* ── le mur qui défile tout seul (leurs keyframes marquee/marquee2) ── */
.mq{position:relative;display:flex;width:100%;overflow-x:hidden;
border-top:4px solid var(--border);border-bottom:4px solid var(--border);
background:var(--secondary-background)}
.mq .t{white-space:nowrap;padding:26px 0;animation:marquee 46s linear infinite}
.mq .t2{position:absolute;top:0;white-space:nowrap;padding:26px 0;animation:marquee2 46s linear infinite}
/* Chez la réf, les 40 vignettes du mur sont TOUTES en portrait 0,75, sans une
exception — mesure du 08/09. La hauteur libre laisserait des largeurs
inegales et casserait la bande. */
.mq img{display:inline-block;height:264px;width:198px;object-fit:cover;
margin:0 9px;vertical-align:middle;
border:2px solid var(--border);border-radius:var(--border-radius);box-shadow:4px 4px 0 var(--border)}
.mq:hover .t,.mq:hover .t2{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0%)}100%{transform:translateX(-100%)}}
@keyframes marquee2{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}
@media(prefers-reduced-motion:reduce){.mq .t,.mq .t2{animation:none}.mq .t2{display:none}}
/* ── les paires original / ta version ─────────────────────────────── */
.paires{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.paires figure.ic{background:var(--secondary-background)}
.paires figure.ic figcaption{color:var(--foreground)}
/* figure.ic est en display:grid SANS grid-template-columns, donc une colonne
`auto` : un enfant en width:100% s'y réfère, et la colonne se réfère à lui.
Le cycle se résout par la taille intrinsèque — avec aspect-ratio sur l'image,
ça donnait hauteur × ratio = 186 × 1,578 = 293 px au lieu de 610 (mesuré le
11/09). minmax(0,1fr) donne à la colonne une taille indépendante du contenu. */
.paires figure.ic.cz{grid-template-columns:minmax(0,1fr)}
.paires figure.ic .cz-w{position:relative;display:block;width:100%}
.cz-ref,.cz-gen{position:absolute;top:0;bottom:0;box-sizing:border-box;
pointer-events:none;border-radius:7px}
.cz-ref{left:calc(var(--xa) * 1%);width:calc((var(--xb) - var(--xa)) * 1%);
border:2.5px dashed var(--border)}
.cz-gen{left:calc(var(--xc) * 1%);width:calc((var(--xd) - var(--xc)) * 1%);
border:2.5px solid var(--border)}
/* les bulles se calent sur l'ENCRE, pas sur le bord du fichier : p04 et p08
portent jusqu'à 3 % de marge blanche, où une bulle flotterait dans le vide */
.cz-w .pil{z-index:2}
.cz-w .pil.pi{left:calc(var(--xa) * 1% + 8px)}
.cz-w .pil.pg{left:auto;right:calc((100 - var(--xd)) * 1% + 8px)}
@media(max-width:760px){
.cz-ref,.cz-gen{border-width:2px;border-radius:5px}
.cz-w .pil{font-size:12px;padding:3px 7px}
}
/* ── les familles d'outils ────────────────────────────────────────── */
.fam{padding:28px;margin-top:22px}
.fam>header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
padding-bottom:16px;margin-bottom:20px;border-bottom:3px solid var(--border)}
.fam h3{font-size:23px}
.fam .cnt{font-size:12.5px;font-weight:900;padding:4px 11px;background:var(--c2);color:#000;
border:2px solid var(--border);border-radius:var(--border-radius)}
.fam .why{font-size:14.5px;opacity:.8;flex:1 1 240px;min-width:200px;line-height:1.45}
.outils{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* [W9] la grille des huit outils : 2 colonnes, blocs larges, images visibles */
.og2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.og2 > :last-child{grid-column:1/-1}
#outils .og2 > :last-child{grid-column:auto} /* [28/09, Ismael 10h05] la carte Retouche remplit la case vide a cote des Planches (14 cases) */
@media(max-width:760px){ .og2{grid-template-columns:1fr} }
.outil{border:2px solid var(--border);border-radius:var(--border-radius);padding:17px 19px;
background:var(--background);box-shadow:3px 3px 0 var(--border)}
.outil h4{font-size:16px;margin-bottom:6px;letter-spacing:-.02em}
.outil p{font-size:14px;line-height:1.5}
.outil code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
background:var(--main);color:var(--main-foreground);padding:1px 7px;
border:1.5px solid var(--border);border-radius:3px;white-space:nowrap}
/* la chaîne */
.chaine{padding:30px;margin-top:34px;background:var(--c2)}
.chaine ol{list-style:none;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.chaine li{font-size:14.5px;font-weight:700;padding:9px 14px;background:var(--secondary-background);
border:2px solid var(--border);border-radius:var(--border-radius);box-shadow:3px 3px 0 var(--border)}
.chaine li.ar{background:transparent;border:0;box-shadow:none;font-size:20px;padding:0 2px}
/* ── pour qui / pas pour qui ──────────────────────────────────────── */
.qui{padding:28px}
.qui.oui{background:var(--c3)}
.qui.non{background:var(--secondary-background)}
.qui h3{font-size:22px;margin-bottom:16px}
.qui ul{list-style:none}
.qui li{font-size:15.5px;line-height:1.55;padding:9px 0 9px 30px;position:relative}
.qui li::before{position:absolute;left:0;font-weight:900;font-size:16px}
.qui.oui li::before{content:"✓"}
.qui.non li::before{content:"✗"}
/* ── le tarif ─────────────────────────────────────────────────────── */
/* [W10, 11/09 21h50] la carte tarif passe a la grammaire la réf : carte BLANCHE
a ombre dure, plan en petites capitales, prix enorme, note italique, groupes
separes par une ligne fine a label centre, items coches. L'ancienne carte
bleue a lignes bordees etait jugee « horrible illisible ». */
.prix{padding:38px 40px;background:var(--secondary-background);color:var(--foreground);
max-width:560px;margin:34px auto 0;border:2px solid var(--border);border-radius:6px;
box-shadow:8px 8px 0 0 var(--border)}
.prix .px-plan{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
color:#737373;margin:0 0 4px} /* [27/09 A10] le color-mix rendait #7a7a7a = 4,29 ; #737373 = 4,74 */
.prix .px{font-size:64px;font-weight:900;letter-spacing:-.05em;line-height:.94}
.prix .px small{font-size:18px;font-weight:700;letter-spacing:normal}
.prix .px-note{margin:10px 0 2px;font-size:13.5px;font-style:italic;font-weight:600;
color:#b3261e} /* [27/09 A10] --c4 = 3,26 ; #b3261e = 5,9 */
.prix .px-sep{display:flex;align-items:center;gap:10px;margin:20px 0 4px}
.prix .px-sep::before,.prix .px-sep::after{content:"";height:1px;flex:1;
background:color-mix(in srgb,var(--foreground) 14%,transparent)}
.prix .px-sep span{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
color:color-mix(in srgb,var(--foreground) 42%,transparent)}
.prix ul{list-style:none;margin:4px 0}
.prix li{font-size:15px;line-height:1.5;padding:7px 0 7px 30px;position:relative}
.prix li.px-ok::before{content:"✅";position:absolute;left:0;top:7px;font-size:14px}
.prix .btn{width:100%;margin-top:20px}
.apres{font-size:13.5px;margin-top:16px;line-height:1.6;text-align:center;opacity:.9}
/* ── les questions (leur accordion) ───────────────────────────────── */
.faq{max-width:880px;margin:40px auto 0}
.faq details{border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px;background:var(--secondary-background)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
cursor:pointer;list-style:none;font-family:inherit;font-weight:700;font-size:16.5px;
padding:17px 19px;background:var(--main);color:var(--main-foreground)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"⌄";font-size:22px;line-height:1;transition:transform .2s ease;flex:0 0 auto}
.faq details[open] summary{border-bottom:2px solid var(--border)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .a{padding:19px;font-size:15.5px;line-height:1.65}
.faq .a p+p{margin-top:12px}
/* ── pied de page ─────────────────────────────────────────────────── */
footer{border-top:4px solid var(--border);background:var(--secondary-background);padding:56px 0 110px}
.cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
footer h4{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
footer a{display:block;text-decoration:none;color:var(--foreground);font-size:14.5px;padding:5px 0;font-weight:500}
footer a:hover{text-decoration:underline;text-underline-offset:4px}
/* ── la fenêtre de connexion (leur dialog) ────────────────────────── */
dialog{border:0;padding:0;background:transparent;max-width:min(430px,92vw)}
dialog::backdrop{background:var(--overlay)}
.dlg{padding:30px;background:var(--secondary-background);border:2px solid var(--border);
border-radius:var(--border-radius);box-shadow:var(--shadow)}
.dlg h3{font-size:22px;margin-bottom:10px}
.dlg p{font-size:14.5px;line-height:1.55;margin-bottom:20px}
.dlg .btn{width:100%;margin-bottom:11px}
.dlg .x{position:absolute;right:16px;top:14px;background:transparent;border:0;
font-size:22px;cursor:pointer;font-family:inherit;line-height:1}
/* ── le sélecteur de teinte ───────────────────────────────────────── */
.sw{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:80;display:flex;
background:var(--secondary-background);border:3px solid var(--border);
border-radius:var(--border-radius);box-shadow:5px 5px 0 var(--border);overflow:hidden}
.sw button{font-family:inherit;font-weight:900;font-size:12.5px;padding:11px 15px;border:0;
background:transparent;cursor:pointer;color:var(--foreground)}
.sw button.on{background:var(--main);color:var(--main-foreground)}
/* ── les animations au défilement ─────────────────────────────────────
Réglages relevés dans les bundles de la réf (Framer Motion, motion-D9D_Qizh.js)
le 08/09/2026, et portés ici en CSS :
initial {opacity:0, y:12, filter:"blur(6px)"}
initial {opacity:0, y:40, filter:"blur(10px)"}
initial {opacity:0, y:60, scale:.7}
transition {duration:.45, ease:"easeOut", delay: s*.08}
Le flou est le détail qui donne la profondeur : l'élément se dénette
en arrivant, il ne fait pas que monter. */
.rv{opacity:0;transform:translateY(18px);filter:blur(6px);
transition:opacity .6s cubic-bezier(.16,1,.3,1),
transform .6s cubic-bezier(.16,1,.3,1),
filter .6s cubic-bezier(.16,1,.3,1);
transition-delay:var(--d,0ms);will-change:opacity,transform,filter}
.rv.in{opacity:1;transform:none;filter:none}
/* l'arrivée ample : plus de course, plus de flou, sur les grands blocs */
.rv.loin{transform:translateY(40px);filter:blur(10px)}
/* l'arrivée en ressort : l'élément grandit et dépasse légèrement.
cubic-bezier(.34,1.56,.64,1) approche le spring de Framer Motion,
il ne le reproduit pas — un spring est une simulation physique. */
.rv.ressort{transform:translateY(60px) scale(.7);filter:none;
transition:opacity .5s ease-out,transform .55s cubic-bezier(.34,1.56,.64,1)}
@media(prefers-reduced-motion:reduce){
.rv,.rv.loin,.rv.ressort{opacity:1;transform:none;filter:none;transition:none}}
/* ── l'animation CONTINUE, liée à la position de défilement ───────────
C'est ce que fait son useScroll / scrollYProgress : la valeur suit le
défilement image par image, elle ne se déclenche pas une fois.
animation-timeline le fait nativement, sans bibliothèque. Les
navigateurs qui ne le connaissent pas ignorent tout le bloc et
gardent l'élément dans son état final. */
/* ⚠ animation-timeline NE TOURNE PAS DANS FIREFOX — mesuré le 10/09/2026 :
CSS.supports('animation-timeline','view()') rend FALSE sur Firefox 155.0.1,
qui est le navigateur d'Ismael. Tout ce bloc est donc INERTE chez lui, et
les éléments restent dans leur état final (ce qui ne casse rien, mais
n'anime rien non plus).
Ce qui bouge réellement chez lui est piloté en JAVASCRIPT : scene.js pour
l'éventail, le script de fin de page pour les révélations. C'est aussi ce
que fait la réf (Framer Motion), et c'est pour ça que SON site bouge.
Ne pas ajouter d'animation ici en croyant qu'elle sera vue. */
@supports (animation-timeline:view()){
@media not (prefers-reduced-motion:reduce){
/* Le flottement, sur un CONTENEUR uniquement : une animation sur
transform ecrase tout transform inline, donc jamais sur un
element qui porte deja un rotate(). Et jamais avec .rv, qui
anime le meme transform. */
.par{animation:derive linear both;
animation-timeline:view();animation-range:entry 0% exit 100%}
@keyframes derive{from{transform:translateY(24px)}to{transform:translateY(-24px)}}
.eq figure.assemble{animation:assembler linear both;
animation-timeline:view();animation-range:cover 0% cover 42%}
/* --amp regle l'AMPLITUDE de la dispersion sans toucher aux valeurs
de chaque figure : sur un telephone, un decalage de 41 px sur une
vignette de 88 px la fait sortir du cadre. Mesure du 09/09 : 13 px
de debordement a 390 px avant ce reglage. */
@keyframes assembler{
from{transform:translate(calc(var(--dx,0px) * var(--amp,1)),
calc(var(--dy,0px) * var(--amp,1)))
rotate(calc(var(--dr,0deg) * var(--amp,1)))}
to {transform:none}
}
}
}
@media(max-width:960px){
.g3,.g4,.g2,.cols,.paires,.outils{grid-template-columns:1fr}
section{padding:66px 0}
.prix{padding:28px}
}
/* ── les trois lignes : scène + ta photo = le résultat ────────────── */
.trio{margin-top:36px;display:flex;flex-direction:column;gap:22px}
.trio .ligne{display:grid;grid-template-columns:1fr auto 1fr auto 1.35fr;gap:14px;align-items:center}
.trio figure.ic{background:var(--secondary-background);margin:0}
.trio figure.ic figcaption{color:var(--foreground);font-size:12.5px;padding:9px 11px}
.trio figure.ic.r{background:var(--main)}
.trio figure.ic.r figcaption{color:var(--main-foreground)}
.trio img{width:100%;height:auto;display:block}
@media(max-width:960px){.trio .ligne{grid-template-columns:1fr;gap:10px}
.trio .op{justify-self:center;font-size:30px}}
/* ── les paires avant/après, la brique que la réf répète ──────────── */
.cas-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:36px}
/* [15/09] un nombre impair de paires (shooting: 1 et 3, photo-produit: 3)
laisse la derniere seule dans sa ligne, colonne 2 vide a cote - un gros
vide (decision-espace-restant). On la centre plutot que de forcer un
nombre pair de paires cote contenu. */
.cas-grille:has(.cas:last-child:nth-child(odd)) .cas:last-child{
grid-column:1/-1;max-width:calc(50% - 13px);margin-inline:auto}
.cas .duo{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.cas .duo figure{margin:0;overflow:hidden;border:2px solid var(--border);
border-radius:var(--border-radius);box-shadow:var(--shadow);background:var(--secondary-background)}
.cas .duo figure.r{background:var(--main)}
/* LE CADRE DECIDE, JAMAIS L'IMAGE — meme regle que .g3 et .eq, portee aux duos
des pages outil. Mesure du 08/09/2026 : a l'interieur d'un MEME duo les ratios
allaient de 0.56 a 0.75, et de 2.30 a 3.02. Deux images cote a cote, deux
hauteurs. Le ratio se declare par grille, et l'orientation suit le sujet —
c'est ce que fait la réf, mesure sur sa page d'accueil a 1440 px. */
.cas .duo img{display:block;width:100%;height:auto;
aspect-ratio:var(--dr,.75);object-fit:cover;object-position:center 28%}
.cas-grille.slides{--dr:.8} /* une slide de carrousel est en 4:5, on ne la rogne pas */
.cas-grille.large{--dr:1.72} /* une capture d'ecran en largeur */
.cas-grille.bandeau{--dr:2.7} /* un bandeau de tableau de bord */
.cas-grille.bandeau .duo img,.cas-grille.large .duo img{object-position:center}
.duo figcaption{padding:2px 12px} /* [27/09 A10] les duos-equations sans classe englobante : texte a 0 px du bord droit sur telephone (outil-shooting) */
.cas .duo figcaption{border-top:2px solid var(--border);padding:8px 13px; /* [27/09 A10] 11 px + letter-spacing .07em : le rect du texte debordait de 1 px a droite (gate, outil-shooting tel) */
font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.cas .duo figure.r figcaption{color:var(--main-foreground)}
.cas .fleche{font-size:26px;font-weight:900;line-height:1}
.cas h3{font-size:18px;margin-top:14px;letter-spacing:-.02em}
.cas small{display:block;font-size:14px;margin-top:5px;opacity:.78;line-height:1.5}
/* ── les cartes de renvoi, illustrées comme les siennes ───────────── */
.renvoi{display:block;overflow:hidden;text-decoration:none;color:inherit;
transition:transform .12s ease,box-shadow .12s ease}
.renvoi:hover{transform:translate(var(--box-shadow-x),var(--box-shadow-y));box-shadow:none}
/* Le cadre suit l'orientation de l'image, ici aussi. Ces vignettes sont
des slides de carrousel Instagram en 4:5 (ratio 0,80) : un cadre 4/3
paysage en rognait 40 %, par le haut ET par le bas, coupant les textes
en plein mot. Mesuré le 08/09 sur g1, g2, g3, g4, g6, g11 — toutes en
0,80 ou 0,81. Le generateur pose --ir depuis le ratio natif ; 0.8 est
le defaut, pas une contrainte. */
.renvoi img{display:block;width:100%;aspect-ratio:var(--ir,1.9);object-fit:cover;
object-position:center top;border-bottom:2px solid var(--border)}
.renvoi .txt{padding:17px 19px}
.renvoi h3{font-size:17px;margin-bottom:6px;min-height:calc(2 * 1.2em)}
.renvoi p{font-size:14px;line-height:1.5;
/* Deux lignes au plus, avec des points de suspension : sinon la hauteur de la
carte suit la longueur du texte, et les cartes d'une meme rangee different.
Ismael, 08/09 14h55 : le CADRE decide, pas le contenu. */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;min-height:calc(2 * 1.5em)}
/* ── les onglets, pour montrer plusieurs jeux de photos ───────────── */
.onglets{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px;margin-bottom:24px} /* [28/09, capture d'Ismael 09h19] l'onglet Shooting commence par les images : 0 px sous l'ombre du bouton actif */
.onglets button{font-family:inherit;font-weight:700;font-size:14.5px;padding:10px 17px;
cursor:pointer;background:var(--secondary-background);color:var(--foreground);
border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:3px 3px 0 var(--border);transition:transform .1s ease,box-shadow .1s ease}
.onglets button:hover{transform:translate(3px,3px);box-shadow:none}
.onglets button[aria-selected="true"]{background:var(--main);color:var(--main-foreground)}
.volet{display:none}
/* [E2-d] La transition floutee tres legere entre onglets. Animation CSS
CLASSIQUE (pas animation-timeline, inerte sur Firefox) : le volet qui
arrive se dessine depuis un leger flou. */
.volet.on{display:block;animation:volet-net .4s ease both}
@keyframes volet-net{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
@media (prefers-reduced-motion: reduce){.volet.on{animation:none}}
/* ── l'animation au survol, légère, comme chez lui ────────────────── */
.g3 .card.b,.g4 .card.b,.g2 .card.b{transition:transform .14s ease,box-shadow .14s ease}
.g3 .card.b:hover,.g4 .card.b:hover,.g2 .card.b:hover{
transform:translate(3px,3px);box-shadow:1px 1px 0 var(--border)}
figure.ic{transition:transform .14s ease,box-shadow .14s ease}
figure.ic:hover{transform:translate(var(--box-shadow-x),var(--box-shadow-y));box-shadow:none}
@media(max-width:960px){.cas-grille{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.renvoi,.card.b,figure.ic{transition:none}}
/* ══ LE RENDU MESURÉ CHEZ REF, le 08/09 à 03h45 ═════════════════
Six écarts relevés en comparant sa page Shooting à la mienne, à la
même largeur : il centre, il alterne les fonds, ses images sont plus
petites et plus nombreuses, ses vignettes portent une étiquette de
couleur, sa flèche est un disque, et son dernier appel est un bloc plein.
═══════════════════════════════════════════════════════════════════ */
/* 1. les sections se centrent, comme les siennes */
section.c > .w{text-align:center}
section.c h2{margin-left:auto;margin-right:auto}
/* [16/09, Ismael : « c'est trop collé le titre et les éléments, tu fais ça partout »]
Dans TOUTE section, ce qui suit le titre (ou le lead) respire : 36 px. Regle
globale, jamais page par page. Les grilles qui portaient deja un margin-top
inline gardent le plus grand des deux. */
section > .w > h2 + :not(p):not(.lead){margin-top:36px!important}
section > .w > .lead + :not(p){margin-top:32px!important}
section > .w > .src{margin-top:18px}
section.c .lead,section.c .src{margin-left:auto;margin-right:auto}
section.c .row{justify-content:center}
section.c .cas h3,section.c .cas small{text-align:center}
section.c .card.b{text-align:left}
/* 2. les fonds alternent, c'est ce qui fait le rythme */
section.f1{background:var(--secondary-background)}
section.f2{background:var(--background)}
section.f3{background:var(--c2)}
section.f1,section.f2,section.f3{border-top:4px solid var(--border)}
/* 3. plus d'images, plus petites : 4 paires par rangée comme lui */
.cas-grille.serre{grid-template-columns:repeat(4,1fr);gap:18px}
.cas-grille.serre .cas h3{font-size:14.5px;margin-top:11px}
.cas-grille.serre .cas small{font-size:12.5px;margin-top:4px}
.cas-grille.serre .duo{gap:7px}
.cas-grille.serre .duo figcaption{padding:5px 7px;font-size:12px;letter-spacing:.04em}
/* 4. l'étiquette de couleur sur la vignette, posée dessus */
.cas .duo figure{position:relative}
.cas .duo .et{position:absolute;left:5px;top:5px;z-index:2;font-size:12px;font-weight:900;
padding:3px 7px;text-transform:uppercase;letter-spacing:.05em;
background:var(--c3);color:#000;border:2px solid var(--border);border-radius:3px}
.cas .duo figure.r .et{background:var(--c4);color:#fff}
/* 5. la flèche est un disque, pas un caractère */
.cas .fleche{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;
font-size:15px;background:var(--c4);color:#fff;
border:2px solid var(--border);border-radius:50%;box-shadow:2px 2px 0 var(--border)}
/* 6. le dernier appel est un bloc plein, pleine largeur */
.final{padding:60px 34px;text-align:center;background:var(--main);
border:3px solid var(--border);border-radius:var(--border-radius);
box-shadow:9px 9px 0 var(--border);margin:0 auto}
.final h2{color:var(--main-foreground);margin:0 auto 14px}
.final .lead{color:var(--main-foreground);margin:0 auto 26px;opacity:.92}
.final .row{justify-content:center}
@media(max-width:1100px){.cas-grille.serre{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.cas-grille.serre{grid-template-columns:1fr}}
/* le fond de la figure apparaissait sous les images de hauteur inégale :
les grilles ne les étirent plus, chaque figure épouse son image */
.g2,.g3,.g4{align-items:start}
.cas-grille .duo{align-items:start}
/* [Z-27, 14/09] la flèche se centre au MILIEU des images, pas en haut :
le start ci-dessus la collait au sommet du rang. */
.cas .duo .fleche{align-self:center}
.cas .duo figure{align-self:start}
/* [16/09] le duo du bloc bonus (16:9 -> 9:16) : la petite figure se centre sur la haute, sinon un vide sous elle */
.op-bonus .duo figure{align-self:center}
.op-bonus .cas.a-large .duo{grid-template-columns:1.5fr auto 1fr} /* a paysage, b portrait : la 16:9 plus large, moins de jaune vide */
.grid3.souple{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.grid3.souple>*{flex:0 1 clamp(260px,30%,360px)}
/* Cinq cartes dans une grille qui en pose quatre laissent la cinquieme
seule sur sa ligne, avec la moitie de la largeur vide. Mesure du 08/09
sur le bloc « Ou pars de ton metier ». La classe .cinq les met sur une
seule ligne ; sous 1200 px le flex-wrap reprend la main et empile. */
.grid3.souple.cinq>*{flex:0 1 clamp(200px,18%,270px)}
/* Sept cartes en trois colonnes laissent la septieme seule : 4 + 3
equilibre les deux lignes. Mesure du 08/09 sur « Ce que tu veux
obtenir ». */
.grid3.souple.sept>*{flex:0 1 clamp(230px,23%,310px)}
/* ── TOUTES LES CARTES SONT UNIFORMES ──────────────────────────────────
Ismael, 08/09 15h01 : « tout doit etre uniforme. Toutes les cards, la
hauteur et la longueur, elles doivent etre uniformes, quel que soit la
taille du texte dedans. » Mesure avant : la grille g3 sortait en 404x145,
404x165, 404x222 et 404x200 pour douze cartes.
Le remede tient en deux regles : la grille impose des lignes egales, et le
texte est borne pour ne plus commander la hauteur. */
.g2,.g3,.g4,.trio,.paires,.grid3{align-items:stretch}
.g2>*,.g3>*,.g4>*,.trio>*,.paires>*,.grid3>*{
display:flex;flex-direction:column;height:100%}
/* le texte d'une carte ne decide plus de sa hauteur */
.g3 .card p,.g3 .b p,.g4 .card p{
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
overflow:hidden;flex:1}
@media(max-width:960px){ /* [28/09] une colonne : plus de hauteurs a egaliser, la coupe ne cachait que du texte (2 pages solution au telephone) */
.g3 .card p,.g3 .b p,.g4 .card p{display:block;-webkit-line-clamp:unset;overflow:visible}}
/* HAUTEUR FIXE, pas un minimum : un minimum se depasse des que le texte est
plus long, et c'est exactement le defaut. 404x200 a cote de 404x222 venait
de la. Le debordement est coupe, ce qui est le prix de l'uniformite. */
/* [11/09] LE JUMEAU EXACT DE [K2], reste en place. La correction du meme jour
avait traite .g2 et laisse .g3/.g4 : les huit cartes d'outils perdaient 107 px
de leur description, soit environ quatre lignes, sur toutes les pages qui les
affichent. Meme cause — height fixe + overflow:hidden ecrit pour « toutes les
cards uniformes » — et meme correctif : align-items:stretch egalise deja les
hauteurs entre voisines, la hauteur fixe n'ajoutait rien et tranchait. */
.g3 .card,.g4 .card,.g3 .b,.g4 .b{min-height:228px}
/* [K2, 10/09] « a la derniere ligne, le texte de ce cadre est completement colle
au bord ». Mesure du 11/09 : il ne collait pas, il DEBORDAIT de 83 px a 1440 et
de 125 px a 390 — deux criteres d'eligibilite invisibles pour le client.
La cause etait height:250px + overflow:hidden, ecrit pour repondre a « toutes les
cards doivent etre uniformes » (08/09 15h01). Mais UNIFORME N'EST PAS FIXE :
align-items:stretch (plus haut) egalise deja les hauteurs entre voisines. La
hauteur fixe n'ajoutait rien et tranchait. min-height garde le plancher visuel
et laisse le contenu tenir. Mesure : 1 carte tranchee sur les 24 du site. */
.g2 .card,.g2 .b{min-height:250px}
.g3 figure.ic,.g4 figure.ic,.g2 figure.ic,.paires figure.ic,.trio figure.ic{height:auto}
/* ── la carte d'outil porte son image ─────────────────────────────────
Ismael, 08/09 14h08 : « AJOUTER des images au bloc les outils ». C'etait
le dernier defaut de l'audit visuel. L'image ouvre la carte, pleine
largeur, au cadre paysage de la réf (1,79 median sur ses 29 paysages). */
.card.o{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.o img{display:block;width:100%;aspect-ratio:1.79;object-fit:cover;
border-bottom:2px solid var(--border)}
.card.o .ic{margin:16px 0 0 18px}
.card.o h3{margin:9px 18px 0}
.card.o p{margin:7px 18px 18px;flex:1}
/* ── les trois reglages de peau mesures chez la réf (session B, 15h51) ── */
/* sa nav FLOTTE : detachee, arrondie, ombre dure */
nav{position:sticky;top:14px;margin:14px auto 0;max-width:1160px;
border:3px solid var(--border);border-bottom-width:3px;border-radius:16px;
box-shadow:5px 5px 0 var(--border)}
nav .w{height:66px;padding:0 22px}
/* son fond porte une GRILLE legere, le notre etait un aplat */
body{background-image:
linear-gradient(rgba(26,26,26,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(26,26,26,.045) 1px,transparent 1px);
background-size:44px 44px}
@media(max-width:620px){nav{top:8px;margin:8px auto 0;max-width:calc(100% - 16px)}}
/* ── 1 · LE SIGNE + ET = : un rond de 48 px ────────────────────────────
Chez lui : h-12 w-12 rounded-full border-2 bg-orange text-white
shadow-hard-sm, font-display 24px bold. Le meme gabarit pour les deux,
seul le caractere change. Remplace l'ancien .op, un caractere nu. */
.signe{display:flex;align-items:center;justify-content:center;
width:48px;height:48px;flex:0 0 auto;border-radius:999px;
border:2px solid var(--border);background:var(--main);color:var(--main-foreground);
font-size:24px;font-weight:900;line-height:1;
box-shadow:3px 3px 0 var(--border);user-select:none}
@media(max-width:700px){.signe{width:32px;height:32px;font-size:17px;box-shadow:2px 2px 0 var(--border)}}
/* ── 2 · LE NUMERO D'ETAPE : un rond JAUNE de 32 px ────────────────────
Chez lui : h-8 w-8 rounded-full border-2 bg-yellow, 14px. Plus petit
que le signe, et jaune au lieu d'orange — c'est ce qui les distingue
du premier coup d'oeil. */
.num{display:flex;align-items:center;justify-content:center;
width:32px;height:32px;flex:0 0 auto;border-radius:999px;
border:2px solid var(--border);background:var(--c2);color:#000;
font-size:14px;font-weight:900;line-height:1;margin-bottom:12px}
/* ── 3 · LE POINTILLE : le cadre de ce qui vient d'ailleurs ────────────
Chez lui : border-2 border-dashed border-black/25 bg-black/[0.03] pour
la zone vide, et border-dashed border-black bg-white quand elle porte
une image. Le pointille dit « cette image n'est pas de toi ». Il
n'apparait JAMAIS sur un resultat. */
.eq figure.inspi,figure.inspi{border-style:dashed!important;box-shadow:none!important}
.eq figure.inspi{background:rgba(0,0,0,.03)}
.eq figure.inspi:hover{transform:none!important;box-shadow:none!important}
/* ── 4 · LA BULLE JAUNE avec sa pointe ─────────────────────────────────
Son texte exact : « trouvees sur Pinterest 📌 ». Ce n'est pas un logo,
c'est l'emoji punaise. La pointe est un carre de 12 px tourne a 45°
avec DEUX bordures seulement — c'est ce qui donne le triangle net. */
.bulle{position:relative;display:inline-flex;align-items:center;gap:7px;
border:2px solid var(--border);border-radius:999px;padding:7px 15px;
background:var(--c2);color:#000;font-size:13.5px;font-weight:800;
box-shadow:3px 3px 0 var(--border);margin:30px 0 4px}
.bulle::after{content:"";position:absolute;bottom:-8px;left:34px;
width:12px;height:12px;transform:rotate(45deg);background:var(--c2);
border-right:2px solid var(--border);border-bottom:2px solid var(--border)}
.bulle img,.bulle svg{width:16px;height:16px;display:block}
/* ── 5 · LES ONGLETS : c'est le FOND qui bascule ───────────────────────
Chez lui : rounded-FULL (une pilule, pas un rayon de 5 px), inactif
bg-white hover:bg-yellow, actif bg-BLACK text-white shadow-hard.
Et l'actif NE SURVOLE PAS : il a deja son ombre, il ne s'enfonce plus.
L'emoji fait partie du libelle : 📸 Shooting · 📦 Produit · 🎬 Miniature */
.onglets button{display:inline-flex;align-items:center;gap:7px;
border-radius:999px;padding:10px 20px}
.onglets button:hover{background:var(--c2)}
.onglets button[aria-selected="true"]{background:var(--border);color:#fff;
box-shadow:4px 4px 0 var(--main)}
.onglets button[aria-selected="true"]:hover{transform:none;
box-shadow:4px 4px 0 var(--main);background:var(--border)}
.onglets button:active{transform:translate(3px,3px) scale(.99);box-shadow:none}
/* ── 6 · LES PASTILLES DE DEFILEMENT : l'active s'ALLONGE ──────────────
Chez lui : h-2.5 w-2.5, et l'active passe a w-7 — de 10 px a 28 px de
LARGE, pas seulement de couleur. Le mouvement se voit du coin de l'oeil. */
.pastilles{display:flex;gap:8px;justify-content:center;margin-top:22px}
.pastilles button{height:10px;width:10px;padding:0;border-radius:999px;
border:2px solid var(--border);background:var(--secondary-background);
cursor:pointer;transition:width .3s ease,background .3s ease}
.pastilles button[aria-current="true"]{width:28px;background:var(--c2)}
/* ── 7 · L'APPARITION MOT PAR MOT, avec un flou qui se leve ────────────
Trois calibrages chez lui selon la taille : blur(8px)/18px,
blur(10px)/22px, blur(8px)/24px. Chaque MOT est un span distinct.
Le decalage est pose en JS (--d), 55 ms par mot. */
h1.mots span,h2.mots span{display:inline-block;
opacity:0;filter:blur(10px);transform:translateY(22px);
transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--d,0ms),
filter .6s cubic-bezier(.16,1,.3,1) var(--d,0ms),
transform .6s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
h1.mots.in span,h2.mots.in span{opacity:1;filter:blur(0);transform:none}
@media(prefers-reduced-motion:reduce){
h1.mots span,h2.mots span{opacity:1;filter:none;transform:none;transition:none}}
/* ── 8 · LE CURSEUR AVANT/APRES ────────────────────────────────────────
AJOUT ASSUME : il n'en a AUCUN, ni sur son accueil ni ailleurs — ses
avant/apres sont deux images cote a cote. Ismael l'a demande quand meme.
Aucune bibliotheque : l'image du dessus est decoupee par clip-path, un
transparent pilote la decoupe. Il reste utilisable
au clavier, ce que les bibliotheques du marche ratent souvent. */
.avap{position:relative;overflow:hidden;border:2px solid var(--border);
border-radius:var(--border-radius);box-shadow:var(--shadow);
background:var(--secondary-background);touch-action:pan-y}
.avap img{width:100%;display:block;aspect-ratio:var(--ar,.8);object-fit:cover}
.avap img.dessus{position:absolute;inset:0;height:100%;
clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.avap input[type=range]{position:absolute;inset:0;width:100%;height:100%;
margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.avap .barre{position:absolute;top:0;bottom:0;left:var(--x,50%);width:4px;
background:var(--border);pointer-events:none;transform:translateX(-2px)}
.avap .poignee{position:absolute;top:50%;left:var(--x,50%);width:42px;height:42px;
margin:-21px 0 0 -21px;border-radius:999px;border:2px solid var(--border);
background:var(--c2);box-shadow:3px 3px 0 var(--border);pointer-events:none;
display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px}
.avap .et{position:absolute;top:12px;font-size:12px;font-weight:900;
text-transform:uppercase;letter-spacing:.1em;padding:5px 11px;
border:2px solid var(--border);border-radius:999px;background:var(--secondary-background)}
.avap .et.g{left:12px} .avap .et.d{right:12px;background:var(--main);color:var(--main-foreground)}
.avap input:focus-visible ~ .poignee{outline:3px solid var(--main);outline-offset:3px}
/* ── 9 · LES BANDES : SES vitesses, 55 s et 70 s ───────────────────────
Elles different pour que les deux bandes ne se synchronisent JAMAIS.
Le contenu se la réfue dans le DOM — d'ou les 40 emplacements pour
20 fichiers, et d'ou son -50 %. */
.mq .t{animation-duration:55s}
.mq .t2{animation-duration:70s}
.mq.lent .t{animation-duration:70s}
.mq.lent .t2{animation-duration:88s}
/* ── 10 · LE LOGO DE SOURCE, sur une vignette d'inspiration ────────────
Un rond blanc borde, en bas a gauche de l'image. Les fichiers sont les
logos OFFICIELS telecharges (v/logo/), jamais redessines. */
.src-logo{position:absolute;left:7px;bottom:7px;width:26px;height:26px;
border-radius:999px;border:2px solid var(--border);background:#fff;
display:flex;align-items:center;justify-content:center;z-index:2}
.src-logo img{width:15px;height:15px;object-fit:contain}
/* Le repli pour les navigateurs qui ignorent animation-timeline : les
vignettes sont simplement alignées, sans dispersion. Rien ne manque au
lecteur, seul le mouvement manque. */
@media(prefers-reduced-motion:reduce){
.eq figure.assemble{transform:none!important;animation:none!important}
}
/* ═══════════════════════════════════════════════════════════════════════
LE MENU DEROULANT DES FONCTIONNALITES — brief du 10/09, §2
Ismael : « un menu deroulant pour regrouper toutes les fonctionnalites.
Quand la souris passe en hover dessus, fais apparaitre un nouveau cadre
qui montre tous les outils, avec a chaque fois en icone un emoji. »
Ouverture au survol ET au focus clavier : un menu qui ne s'ouvre qu'a la
souris est inaccessible, et le telephone n'a pas de survol.
═══════════════════════════════════════════════════════════════════════ */
nav .menu{position:relative;display:flex;align-items:center}
nav .menu .dd{background:none;border:0;cursor:pointer;font:inherit;
color:var(--foreground);font-weight:700;font-size:15px;white-space:nowrap;
display:inline-flex;align-items:center;gap:5px;padding:6px 0}
nav .menu .dd .chev{display:inline-block;transform-origin:50% 50%;
transition:transform .18s ease;position:relative;top:1px;flex:0 0 auto}
nav .menu:hover .dd .chev,nav .menu:focus-within .dd .chev{transform:rotate(180deg)}
nav .menu .dd:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2.5px}
nav .menu .volet{
position:absolute;top:100%;left:-18px;margin-top:13px;
display:none;grid-template-columns:1fr 1fr;gap:4px;
width:min(680px,calc(100vw - 40px));padding:10px;
background:var(--secondary-background);
border:3px solid var(--border);border-radius:14px;
box-shadow:6px 6px 0 var(--border);z-index:80}
/* le pont invisible : sans lui, le curseur traverse 13 px de vide et le menu se referme */
nav .menu .volet::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
nav .menu:hover .volet,nav .menu:focus-within .volet{display:grid}
nav .menu .volet a{
display:flex;gap:11px;align-items:flex-start;
padding:11px 12px;border-radius:10px;text-decoration:none;
border:2px solid transparent;transition:background .12s,border-color .12s}
nav .menu .volet a:hover,nav .menu .volet a:focus-visible{
background:var(--background);border-color:var(--border);outline:none}
nav .menu .volet .em{font-size:19px;line-height:1.15;flex:0 0 auto}
nav .menu .volet .tx{display:block;min-width:0}
nav .menu .volet b{display:block;font-size:14px;font-weight:800;
color:var(--foreground);letter-spacing:-.02em;line-height:1.25}
nav .menu .volet i{display:block;font-style:normal;font-size:12.5px;
color:var(--foreground);opacity:.62;line-height:1.35;margin-top:2px}
/* le bouton « Se connecter » porte son icone de porte */
nav .btn.n svg{margin-right:7px;flex:0 0 auto}
/* [Z1, 11/09] CETTE REGLE TUAIT LE MASQUAGE MOBILE. Ecrite le 10/09 en meme temps
que l'icone du bouton, elle a la MEME specificite que « nav .btn.n{display:none} »
du bloc @media(max-width:620px) plus haut, mais elle vient APRES : elle gagnait.
Resultat mesure le 11/09 : « Se connecter » restait affiche a 390 px, la nav
poussait la page a 460 px, et le telephone defilait de 70 px lateralement.
Ses deux declarations etaient de surcroit REDONDANTES avec .btn (display:inline-flex
et align-items:center y sont deja). Elle ne servait a rien et cassait le mobile. */
/* nav .btn.n : retiree, cf ci-dessus */
@media(max-width:1080px){nav .menu{display:none}}
/* ══ [A3] LA PAIRE DE LA HERO ══════════════════════════════════════════
Zone libre mesuree le 10/09 a 20h50 : 616 x 302 px sous le titre, a droite
des paragraphes. La paire s'y ancre en absolu — le flux de gauche n'est pas
touche, donc sa largeur ne bouge pas d'un pixel.
Sous 1240 px, elle repasse dans le flux : masquer un contenu sur mobile,
c'est le perdre. */
section:first-of-type > .w{position:relative}
/* Le debordement de 26 px ne vaut que s'il y a la place. A 1280 px de large,
le conteneur touche le bord de la fenetre et la paire sortait de l'ecran :
32 px de defilement horizontal, mesure le 10/09 a 21h05. */
/* right:0 ne suffit pas : l'ombre portee sort de 11 px et la rotation de 2,5
degres de 4 de plus. Il restait 6 px de defilement a 1280. */
.hero-paire{position:absolute;right:20px;bottom:2px;
width:620px;display:flex;align-items:center;gap:2px;pointer-events:none}
@media(min-width:1400px){ .hero-paire{right:-26px} }
.hero-paire figure{margin:0;position:relative;background:var(--secondary-background);
border-radius:var(--border-radius);overflow:visible}
.hero-paire img{display:block;width:100%;height:auto;
border-radius:var(--border-radius)}
/* [P1] la reference porte des POINTILLES : elle vient d'ailleurs. */
.hp-ref{flex:0 1 148px;min-width:0;rotate:-5deg;translate:0 0} /* [28/09] -10 px la remontait a 8 px du logo Claude du titre */
.hp-ref img{border:3px dashed var(--border);opacity:.92}
/* La sienne : 1,9 fois plus grande, penchee dans l'autre sens, elle deborde
du conteneur a droite — le « qui sort du cadre » de la réf. */
.hp-toi{flex:0 1 268px;min-width:0;rotate:2.5deg;translate:0 8px;z-index:2}
.hp-toi img{border:3.5px solid var(--border);
box-shadow:11px 13px 0 var(--border),0 22px 44px rgba(0,0,0,.22)}
.hero-paire figcaption{position:absolute;left:8px;bottom:-13px;
font-size:12px;font-weight:900;letter-spacing:.005em;
padding:4px 10px;border:1.5px solid var(--border);border-radius:999px;
box-shadow:1px 1px 0 var(--border);white-space:nowrap;
background:var(--c4);color:#fff}
.hp-toi figcaption{background:var(--c3);color:#000;
font-size:12.5px;padding:5px 12px;border-width:2px;
box-shadow:1.5px 1.5px 0 var(--border)}
.hp-fl{flex:0 1 46px;min-width:0;height:26px;color:var(--border);z-index:3;
translate:0 -2px}
/* L'entree : la reference se pose, la sienne arrive en dessous et remonte.
Respectee si la personne a demande moins de mouvement. */
@keyframes hp-pose{from{opacity:0;translate:0 14px;scale:.94}to{opacity:1}}
.hp-ref{animation:hp-pose .7s cubic-bezier(.16,1,.3,1) .25s backwards}
.hp-fl {animation:hp-pose .5s cubic-bezier(.16,1,.3,1) .55s backwards}
.hp-toi{animation:hp-pose .8s cubic-bezier(.16,1,.3,1) .45s backwards}
@media(max-width:1240px){
.hero-paire{position:static;width:100%;max-width:620px;margin:30px 0 0;
right:auto;bottom:auto}
}
@media(max-width:560px){
.hp-ref{flex:0 0 38%}
.hp-toi{flex:0 0 55%}
.hp-fl{flex:0 0 7%}
}
@media(prefers-reduced-motion:reduce){
.hp-ref,.hp-fl,.hp-toi{animation:none}
}
/* ── §5 : la mention de la hero, en gris clair ────────────────────── */
.mention-hero{font-size:13.5px;color:var(--foreground);opacity:.5;
font-weight:600;letter-spacing:.01em;margin:14px 0 0}
/* ── [A2] les deux logos poses dans le titre ───────────────────────────────
Cales sur la hauteur de CAPITALE, pas sur la taille de police : un logo
aligne sur l'em depasse la ligne des majuscules et flotte. 0.72em est la
hauteur de capitale d'Archivo, mesuree sur son metrique. */
.lgt{display:inline-grid;place-items:center;vertical-align:baseline;
width:.78em;height:.78em;translate:0 .04em}
/* Sous 760 px le titre passe a cinq lignes et le starburst retombait seul :
le meme defaut que sur grand ecran, un cran plus bas. Il retrecit pour tenir
au bout de la ligne du mark. */
@media(max-width:760px){
.lgt{width:.62em;height:.62em}
/* Le mark est un inline-block : a 390 px il occupait 345 px sur 366 utiles,
et le logo n'avait plus la place. On la lui RESERVE, plutot que de rapetisser
le logo au jugé jusqu'a ce que ca passe. */
h1 mark{max-width:calc(100% - 1.1em)}
}
.lgt img{width:100%;height:100%;object-fit:contain;display:block}
/* h1.mots span pose opacity:0 sur TOUT span descendant — c'est l'animation
d'apparition des mots, et elle attrapait les logos au passage. Ils s'affichaient
par accident, parce que la classe .in finissait par arriver. On le dit
explicitement : un logo n'est pas un mot. */
h1.mots span.lgt,h2.mots span.lgt{opacity:1;filter:none;transform:none;transition:none}
/* [A1, 10/09] Le bloc .modeles et la bulle .bulle sont retires du HTML sur
consigne d'Ismael : les mentions techniques quittent la promesse d'ouverture.
Leur CSS part avec eux, sinon il reste des regles que rien n'atteint. */
/* [B2, 10/09] « Supprime l'ecart entre les boutons et le cercle en dessous. »
La hero porte 74px de padding bas et la scene centre son contenu dans 100vh :
les deux s'ajoutaient. La scene remonte de sa propre marge. */
.scene{position:relative;height:260vh;margin-top:-58px}
.scene-fixe{position:sticky;top:0;height:100vh;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:18px;overflow:hidden}
.scene-tete{text-align:center;min-height:74px}
.scene-dit{font-size:16px;font-weight:700;opacity:.66;margin:9px 0 0;
transition:opacity .25s ease}
/* l'aire de jeu : les vignettes y sont posees en absolu, le JS les place */
/* [B3]+[B8], 10/09 : les cartes du cercle grossissent (0,52 -> 0,68) ET
s'eloignent du centre. A 560px de haut, la couronne touchait la carte
centrale : l'aire de jeu monte a 620. Le min() la fait redescendre toute
seule sur un ecran court, donc rien ne deborde en bas. */
.arc{position:relative;width:min(1180px,96vw);height:min(700px,78vh)}
.ph{position:absolute;left:50%;top:50%;margin:0;
width:var(--w,196px);height:calc(var(--w,196px) * 1.25);
border:2.5px solid var(--border);border-radius:var(--border-radius);
background:var(--secondary-background);overflow:hidden;
box-shadow:4px 4px 0 var(--border);
will-change:transform;transform-origin:50% 50%}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* Les logos de la scene. Ismael, 10/09 : « les logos restent mais se
repartissent correctement » — ils ne s'effacent donc jamais, ils voyagent.
Poses en absolu comme les vignettes, c'est le JS qui les place. */
.lg{position:absolute;left:50%;top:50%;
width:42px;height:42px;display:grid;place-items:center;
background:#fff;border:2.5px solid var(--border);border-radius:50%;
box-shadow:2.5px 2.5px 0 var(--border);
will-change:transform;transform-origin:50% 50%;pointer-events:none}
.lg{overflow:hidden}
.lg.plein{background:#fff;padding:0}
.lg.plein img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.lg.gl img{width:76%;height:76%;object-fit:contain;display:block}
@media(max-width:900px){
.lg{width:34px;height:34px}
}
/* ── [B5]+[B6], 10/09 : les bulles du cercle ───────────────────────────────
B5 « plus lisibles, de couleurs plus vives et variees » — le blanc d'« Inspi »
ne se lisait pas comme une couleur, il se lisait comme une absence. Les trois
roles portent maintenant trois teintes distinctes, et aucune n'est le jaune
qu'il a ecarte en B11.
B6 « legerement plus fines » — un ajustement, pas une refonte : le trait passe
de 2 a 1.5px, l'ombre de 1.5 a 1px.
HIERARCHIE : « Toi » porte le message (une seule photo donnee), donc elle est
plus grosse que les deux autres. */
.pil{position:absolute;left:8px;top:8px;
font-size:12px;font-weight:900;letter-spacing:.005em;
padding:4px 10px;border:1.5px solid var(--border);
border-radius:999px;white-space:nowrap;
box-shadow:1px 1px 0 var(--border)}
.pil.pi{background:var(--c4);color:#fff} /* la reference : rouge */
.pil.pt{background:var(--main);color:var(--main-foreground)} /* toi : la couleur mere */
.pil.pg{background:var(--c3);color:#000} /* le resultat : vert */
.pil.pt{font-size:13px;padding:5px 12px;border-width:2px;
box-shadow:1.5px 1.5px 0 var(--border)}
/* §10 : la bulle du second temps, elle n'existe qu'a l'arrivee */
.bulle-30{position:relative;display:inline-flex;align-items:center;
font-size:14px;font-weight:800;padding:9px 17px;
background:var(--c3);color:#000; /* [B11] plus le jaune : « pas beau je trouve » */
border:2.5px solid var(--border);border-radius:999px;
box-shadow:3px 3px 0 var(--border);
opacity:0;transform:translateY(10px);
transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.bulle-30.la{opacity:1;transform:translateY(0)}
@media(max-width:900px){
.scene{height:210vh}
.arc{height:min(420px,50vh)}
}
/* Personne ne veut d'une page qui bouge quand on lui a demande de ne pas
bouger : le JS lit cette preference et pose l'etat final, sans transition. */
@media(prefers-reduced-motion:reduce){
.ph{transition:none!important}
.bulle-30{transition:none}
}
/* ═══════════════════════════════════════════════════════════════════════
LE MUR EN TROIS RANGEES — brief du 10/09, §13
Ismael : « il y a un bug dans le code, les deux bandes sont superposees.
Litteralement, on ne voit plus celle qui est derriere. Il faut qu'elle
soit en dessous. Tu peux rajouter trois lignes meme. »
LE BUG, DIAGNOSTIQUE : l'ancienne .t2 etait en position:absolute; top:0,
donc POSEE PAR-DESSUS la premiere bande. Deux pistes au meme endroit.
LE CORRECTIF est sa technique a lui, relevee le 08/09 dans son CSS :
marquee-forward 0%{translate(-50%)} to{translate(0)}
marquee-reverse 0%{translate(0)} to{translate(-50%)}
Une SEULE piste, dont le contenu est double a l'interieur. Translater de
-50 % ramene donc exactement sur la copie : boucle sans couture, et
aucune superposition possible par construction.
═══════════════════════════════════════════════════════════════════════ */
/* [C1, 10/09] « L'espace entre cette description et la bande d'images en
dessous est trop court. Il n'y a aucune marge. » */
.mur{margin-top:40px;
border-top:4px solid var(--border);border-bottom:4px solid var(--border);
background:var(--secondary-background);padding:16px 0;
display:flex;flex-direction:column;gap:22px} /* [28/09] 14 px ombre comprise faisait se toucher les rangees (gate_blocs_voisins, seuil 16) */
.mq-r{overflow:hidden;width:100%}
.mq-p{display:flex;gap:14px;width:max-content;
animation-duration:var(--d,64s);animation-timing-function:linear;
animation-iteration-count:infinite}
.mq-p.av{animation-name:mur-avant}
.mq-p.ar{animation-name:mur-arriere}
@keyframes mur-avant{from{transform:translateX(-50%)} to{transform:translateX(0)}}
@keyframes mur-arriere{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* [C4, 10/09] Ismael : « je te l'avais dit, mais je veux supprimer cette
consigne, donc je veux plus que ca s'arrete ». La regle
.mur:hover .mq-p{animation-play-state:paused} est REVOQUEE — trace ici pour
qu'un futur audit ne la restaure pas en croyant reparer un oubli. */
/* ── [C2]+[C3]+[C5] : la carte du mur ──────────────────────────────────────
C3 — le cadre faisait 177x236, soit un ratio de 0,75, applique a des images
qui sont en 4:5. MESURE du 10/09 : 46 images sur 47 sont a 0,80 ou 0,806,
une seule est carree. Le cadre s'aligne donc sur ELLES (190x236 = 0,805) au
lieu de les couper : surface visible 92,9 % -> 99,4 %.
C2 — la bulle se pose SOUS la vignette. Ismael : « pas les bulles SUR le
carrousel pour pas deranger la lecture du slide ».
C5 — au survol, la carte se retourne et montre l'originale. 8 cartes sur 47
l'ont : les 39 autres viennent de generations qui n'ont pas garde leurs
originaux, et une carte qui se retourne sur du vide serait un mensonge. */
.mq-c{margin:0;flex:0 0 auto;display:flex;flex-direction:column;gap:7px}
.mq-f{display:block;position:relative;width:190px;height:236px;
transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.mq-c img{display:block;width:190px;height:236px;object-fit:cover;
border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:3px 3px 0 var(--border);backface-visibility:hidden}
.mq-c .mq-ar{position:absolute;inset:0;transform:rotateY(180deg);
border-style:dashed;border-width:3px}
.mq-c.duo:hover .mq-f{transform:rotateY(180deg)}
.mq-c figcaption{display:flex;justify-content:center;min-height:19px}
.mq-c figcaption b{font-size:12px;font-weight:900;letter-spacing:.005em;
padding:3px 9px;border:1.5px solid var(--border);border-radius:999px;
box-shadow:1px 1px 0 var(--border);white-space:nowrap;
background:var(--c3);color:#000}
.mq-c .mq-p2{display:none;background:#d6292c;color:#fff} /* [27/09 A10] --c4 sur blanc = 3,26 ; #d6292c garde le blanc a 4,98 */
.mq-c.duo:hover .mq-p1{display:none}
.mq-c.duo:hover .mq-p2{display:inline-block}
/* Une carte retournable se signale AVANT le survol : sinon personne ne
decouvre qu'il y a un dos. Un coin corne, discret. */
.mq-c.duo .mq-f::after{content:"";position:absolute;right:0;top:0;width:17px;height:17px;
background:linear-gradient(225deg,var(--border) 50%,transparent 50%);
border-top-right-radius:var(--border-radius);pointer-events:none;z-index:2}
.mq-c.duo:hover .mq-f::after{opacity:0}
@media(max-width:760px){
.mq-c img,.mq-f{width:139px;height:172px}
.mur{gap:20px}
/* Le survol n'existe pas au doigt : sur telephone la carte ne se retourne
pas, et son coin corne disparait plutot que de promettre un geste
impossible. */
.mq-c.duo .mq-f::after{display:none}
}
@media(prefers-reduced-motion:reduce){.mq-p{animation:none}}
/* ── [O1] l'essai gratuit se signale dans le pied de page ─────────────────
Ismael : mettre en valeur pour « bien pousser les gens a cliquer ». */
.pied-gratuit{display:inline-flex!important;align-items:center;gap:7px}
.pied-gratuit b{font-size:12px;font-weight:900;letter-spacing:.03em;
text-transform:uppercase;padding:2px 7px;border-radius:999px;
background:var(--c3);color:#000;border:1.5px solid var(--border)}
/* ── [E4-c] a [E4-l] : l'argumentaire des stories ──────────────────────────
Quatre cases, entre les stories reperees et la sequence produite. Elles
portent l'atout differenciant du produit : la SEQUENCE, les photos reelles
du client, l'appariement des fonds, et le fait qu'une story ne parle pas que
de travail. */
.stor-quoi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 30px}
.sq{background:var(--secondary-background);
border:2.5px solid var(--border);border-radius:var(--border-radius);
box-shadow:3px 3px 0 var(--border);padding:16px 16px 15px}
.sq-i{display:grid;place-items:center;width:38px;height:38px;margin-bottom:10px;
background:var(--c3);border:2px solid var(--border);border-radius:999px;
box-shadow:1.5px 1.5px 0 var(--border);font-size:18px;line-height:1}
.sq-i img{width:21px;height:21px;object-fit:contain;display:block}
.sq b{display:block;font-size:15px;font-weight:900;letter-spacing:-.012em;
line-height:1.24;margin-bottom:6px}
.sq p{margin:0;font-size:13.5px;line-height:1.48;opacity:.76}
@media(max-width:980px){ .stor-quoi{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .stor-quoi{grid-template-columns:1fr} }
/* ── [E2-e] LES QUATRE ETAPES, sous les volets ─────────────────────────────
Elles valent pour les quatre onglets, donc elles vivent en dehors d'eux —
contrairement a la planche de stories que [E0] vient d'en sortir, qui, elle,
ne concernait qu'un seul onglet. */
.etapes{list-style:none;margin:34px 0 0;padding:0;
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
counter-reset:none}
.etapes li{display:flex;align-items:flex-start;gap:11px;
background:var(--secondary-background);
border:2.5px solid var(--border);border-radius:var(--border-radius);
box-shadow:3px 3px 0 var(--border);padding:14px 15px}
.etapes b{flex:0 0 auto;width:27px;height:27px;display:grid;place-items:center;
background:var(--main);color:var(--main-foreground);
border:2px solid var(--border);border-radius:999px;
font-size:13px;font-weight:900;box-shadow:1.5px 1.5px 0 var(--border)}
.etapes span{display:block;font-size:13.5px;line-height:1.42;opacity:.78}
.etapes i{display:block;font-style:normal;font-weight:900;font-size:14.5px;
opacity:1;margin-bottom:3px;letter-spacing:-.01em}
@media(max-width:980px){ .etapes{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .etapes{grid-template-columns:1fr} }
/* ═══════════════════════════════════════════════════════════════════════
LES QUATRE VOLETS — brief du 10/09, §17 a §23
═══════════════════════════════════════════════════════════════════════ */
.ss.cen{text-align:center;margin:22px auto 0;max-width:640px;opacity:.62;font-weight:600}
/* ── §18 : trois couvertures, l'eventail se deroule au survol ───────
« tu montres la cover, et si les gens passent en hover dessus, ca ouvre
le carrousel en eventail pour laisser apparaitre les dix slides. La cover
se deplace sur la gauche, le reste des slides se deroulent sur la droite
pour prendre la quasi-totalite de la largeur de l'ecran. »
Ouvre aussi au FOCUS clavier : au survol seul, rien n'existe au doigt. */
.carrousels{display:flex;justify-content:center;gap:26px;margin-top:24px;
padding-bottom:8px;position:relative}
.cr{position:static;flex:0 0 auto;width:220px;cursor:pointer;outline:none}
.cr .cv{width:100%;aspect-ratio:.8;object-fit:cover;display:block;
border:2.5px solid var(--border);border-radius:var(--border-radius);
box-shadow:5px 5px 0 var(--border);
transition:transform .2s ease,box-shadow .2s ease}
.cr:hover .cv,.cr:focus-visible .cv{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--border)}
.cr>figcaption{margin-top:10px;font-size:13.5px;font-weight:700;text-align:center;line-height:1.3}
.carrousels{position:relative}
.carrousels .cr{transition:opacity .26s ease,transform .34s cubic-bezier(.16,1,.3,1)}
.carrousels.ouv .cr:not(.actif){opacity:0;pointer-events:none;transform:scale(.94)}
.carrousels.ouv .cr.actif{z-index:6}
.carrousels.ouv .cr.actif .cv{opacity:0} /* .cvd la reprend dans le panneau */
/* le panneau suit .actif et non :hover — sinon il ne s'ouvre jamais au clavier,
ou la navigation par tabulation posait bien le focus mais rien ne se depliait. */
.carrousels .cr.actif .dep{opacity:1;visibility:visible;
transform:translateX(-50%) scaleY(1)}
/* le deroule : il sort du flux, sur toute la largeur de la section */
.cr .dep{position:absolute;left:50%;top:-24px;
width:min(1180px,94vw);transform:translateX(-50%) scaleY(.9);
transform-origin:50% 0;
display:flex;gap:10px;align-items:flex-start;
padding:14px;background:var(--secondary-background);
border:3px solid var(--border);border-radius:16px;
box-shadow:7px 7px 0 var(--border);
opacity:0;visibility:hidden;pointer-events:none;z-index:40;
transition:opacity .22s ease,transform .22s ease,visibility .22s}
.cr:hover .dep,.cr:focus-visible .dep{opacity:1;visibility:visible;
transform:translateX(-50%) scaleY(1)}
.cr .dep .cvd{flex:0 0 auto;width:186px;aspect-ratio:.8;object-fit:cover;
border:2.5px solid var(--border);border-radius:var(--border-radius);
box-shadow:3px 3px 0 var(--border)}
/* la rangee suit la HAUTEUR de la couverture, sinon elle laisse du vide
sous elle : mesure a la capture du 10/09. Et son bord droit s'estompe,
parce qu'une slide tranchee net se lit comme un defaut d'affichage. */
.cr .dep .rl{display:flex;gap:8px;overflow:hidden;flex:1 1 auto;
align-items:flex-start;
-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.cr .dep .rl img{flex:0 0 auto;width:auto;height:232px;aspect-ratio:.8;object-fit:cover;
border:2px solid var(--border);border-radius:var(--border-radius)}
/* ── §19 §22 : le duo avant / apres, cote a cote ───────────────────── */
.ap2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
.ap2 .duo{position:relative;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;
padding:8px;background:var(--secondary-background);
border:2.5px solid var(--border);border-radius:14px;
box-shadow:4px 4px 0 var(--border)}
.ap2 .duo img{width:100%;height:auto;display:block;
border:2px solid var(--border);border-radius:calc(var(--border-radius) - 2px)}
.ap2 .duo figcaption{grid-column:1/-1;font-size:13px;font-weight:700;
padding:4px 2px 2px;line-height:1.3}
.ap2 .duo .lab,.v3 .lab{position:absolute;top:15px;z-index:3;
display:inline-flex;align-items:center;gap:5px;
font-size:12px;font-weight:900;padding:3.5px 9px;
border:2px solid var(--border);border-radius:999px;
box-shadow:1.5px 1.5px 0 var(--border)}
.ap2 .duo .lab.g,.v3 .lab.g{left:15px;background:var(--secondary-background);color:var(--foreground)}
.ap2 .duo .lab.d,.v3 .lab.d{right:15px;background:var(--main);color:var(--main-foreground)}
.ap2 .duo .lab.yt{background:#fff;color:#111}
/* une miniature est en 16:9 : deux par rangee suffisent a la lire */
.ap2.mini .duo img{aspect-ratio:16/9;object-fit:cover}
/* ── §23 : les stories au format 9:16, jamais en cover ─────────────── */
.g3.stor{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;
max-width:720px;margin-left:auto;margin-right:auto}
.g3.stor img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.planche{margin:26px auto 0;max-width:900px}
.planche img{width:100%;height:auto;display:block;
border:2.5px solid var(--border);border-radius:14px;box-shadow:5px 5px 0 var(--border)}
.planche figcaption{margin-top:10px;font-size:13.5px;font-weight:650;
opacity:.7;text-align:center;line-height:1.4}
@media(max-width:900px){
.ap2{grid-template-columns:1fr}
.carrousels{gap:22px} /* [28/09] 14 px moins l'ombre des couvertures = 9 px au telephone */
.cr{width:150px}
.g3.stor{gap:12px}
}
/* [Z1, 11/09] TROIS COUVERTURES FIXES A 150 PX NE TIENNENT PAS SUR UN TELEPHONE :
3 x 150 + 2 x 14 = 478 px dans un conteneur de 342, d'ou 44 px de defilement
lateral a 390 et 59 a 360 (mesure du 11/09 sur les 25 pages : index seule).
Ismael veut TROIS couvertures, pas moins (10/09 11h12 : « il faudra qu'il y en
ait trois carrousels, pas plus »). Elles deviennent donc elastiques au lieu de
disparaitre : flex:1 1 0 les repartit, min-width:0 autorise un enfant flex a
retrecir sous sa taille intrinseque — sans lui, la ligne deborde quand meme. */
@media(max-width:620px){
.cr{flex:1 1 0;width:auto;min-width:0}
.cr>figcaption{font-size:12px;margin-top:7px}
}
/* ── §34 : le Canevas porte enfin une image ────────────────────────── */
.canevas-vue{margin:20px 0 0}
.canevas-vue img{width:100%;height:auto;display:block;
border:2.5px solid var(--border);border-radius:12px;box-shadow:4px 4px 0 var(--border)}
.canevas-vue figcaption{margin-top:9px;font-size:14px;font-weight:650;opacity:.72;line-height:1.4}
/* ── §33 : la pastille « Nouveau », dans nos couleurs ─────────────── */
.neuf{display:inline-block;vertical-align:middle;margin-left:7px;
font-size:12px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;
padding:3px 9px;background:var(--c2);color:#000;
border:2px solid var(--border);border-radius:999px;
box-shadow:1.5px 1.5px 0 var(--border);white-space:nowrap}
/* ── §14 §15 §16 : chaque geste porte l'image qui l'appuie ─────────── */
.g4.gestes .card{display:flex;flex-direction:column}
.g4.gestes figure{margin:14px 0 0;flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}
.g4.gestes figure img{width:100%;height:158px;object-fit:cover;object-position:top center;display:block;
border:2px solid var(--border);border-radius:var(--border-radius);background:var(--secondary-background)}
.g4.gestes figcaption{margin-top:8px;font-size:12px;font-weight:650;opacity:.62;line-height:1.35}
/* ── §23 : les deux rangees de l'onglet stories ────────────────────── */
.rang-tit{text-align:center;margin:26px 0 0;font-size:13px;font-weight:900;
text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.ss-inline{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;
text-transform:none;letter-spacing:0;opacity:.72;
padding:2.5px 8px;background:var(--secondary-background);
border:2px solid var(--border);border-radius:999px;vertical-align:middle}
.rang-tit + .g3.stor{margin-top:12px}
/* ── §23 : le mur des quinze stories reperees ─────────────────────── */
.mur-stories{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:12px}
.mur-stories figure{margin:0}
.mur-stories img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:3px 3px 0 var(--border)}
.mur-stories figcaption{margin-top:6px;font-size:12px;font-weight:650;
opacity:.6;line-height:1.3}
@media(max-width:900px){.mur-stories{grid-template-columns:repeat(3,1fr);gap:9px}}
@media(max-width:560px){.mur-stories{grid-template-columns:repeat(2,1fr)}}
/* ── §14 : le modal de lien du studio ──────────────────────────────── */
.voile{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
justify-content:center;padding:20px;background:rgba(26,26,26,.55)}
.voile[hidden]{display:none}
.modal{position:relative;width:min(560px,100%);
background:var(--secondary-background);
border:3px solid var(--border);border-radius:18px;
box-shadow:8px 8px 0 var(--border);padding:30px 28px 24px}
.modal h2{font-size:23px;margin:0 0 6px;letter-spacing:-.02em}
.modal .aide{font-size:14px;opacity:.66;margin:0 0 20px;line-height:1.45}
.modal .fermer{position:absolute;top:14px;right:16px;width:32px;height:32px;
border:2px solid var(--border);border-radius:999px;background:var(--background);
font-size:19px;line-height:1;cursor:pointer;font-weight:700}
.champ{display:block}
.champ span{display:block;font-size:12px;font-weight:900;text-transform:uppercase;
letter-spacing:.04em;opacity:.6;margin-bottom:6px}
.champ input{width:100%;padding:13px 15px;font:inherit;font-size:15px;
border:2.5px solid var(--border);border-radius:11px;background:var(--background);
color:var(--foreground)}
.modal .ou{text-align:center;font-size:12.5px;font-weight:800;opacity:.45;
text-transform:uppercase;letter-spacing:.06em;margin:15px 0}
.pioche{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
padding:14px 15px;background:var(--background);cursor:pointer;font:inherit;
border:2.5px solid var(--border);border-radius:12px}
.pioche:hover{background:var(--c2)}
.pioche .pic{font-size:21px;flex:0 0 auto}
.pioche .txt{flex:1 1 auto;min-width:0}
.pioche b{display:block;font-size:14.5px;font-weight:800}
.pioche i{display:block;font-style:normal;font-size:12.5px;opacity:.6;margin-top:2px}
.pioche .fl{opacity:.45;font-size:17px}
.modal .pied{display:flex;align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:18px;
border-top:2px solid var(--border)}
.coche{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:650;opacity:.78}
.coche input{width:17px;height:17px;accent-color:var(--main)}
/* ── §14 : l'ecran de depart, au-dessus des quatre gestes ─────────── */
.ecran-depart{margin:26px auto 0;max-width:720px}
.ecran-depart img{width:100%;height:auto;display:block;
border:2.5px solid var(--border);border-radius:14px;box-shadow:5px 5px 0 var(--border)}
.ecran-depart figcaption{margin-top:10px;font-size:13.5px;font-weight:650;
opacity:.7;text-align:center;line-height:1.45;max-width:56ch;margin-left:auto;margin-right:auto}
/* ── §1 : chaque bulle dit a quoi sert son modele ─────────────────── */
.modeles .m{flex-direction:row;align-items:baseline;gap:7px}
.modeles .m i{font-style:normal;font-size:12px;font-weight:650;opacity:.55}
.modeles .m.ta{background:var(--c2);color:#000}
.modeles .m.ta i{opacity:.68}
/* ── LE PARCOURS DU CLONEUR, cinq ecrans ──────────────────────────── */
.modal.parcours{width:min(880px,100%);padding:30px 34px 26px}
.modal .etape{display:none}
.modal .etape.on{display:block}
.jauge{display:flex;gap:6px;margin:0 0 20px;padding-right:44px}
.jauge .pas{flex:1 1 auto;height:5px;border-radius:999px;
background:var(--border);opacity:.18;transition:opacity .2s}
.jauge .pas.on{opacity:1;background:var(--main)}
.nav{position:absolute;bottom:22px;width:42px;height:42px;
border:2.5px solid var(--border);border-radius:999px;
background:var(--background);font-size:18px;cursor:pointer;font-weight:700;
box-shadow:2.5px 2.5px 0 var(--border);transition:transform .15s}
.nav:hover:not(:disabled){transform:translate(-1px,-1px)}
.nav:disabled{opacity:.28;cursor:default;box-shadow:none}
.nav.g{right:74px}
.nav.d{right:24px;background:var(--main);color:var(--main-foreground)}
/* 2 — les publications enregistrees */
.grille-saved{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:6px}
.grille-saved .vign{position:relative;padding:0;border:2.5px solid var(--border);
border-radius:9px;overflow:hidden;background:none;cursor:pointer;line-height:0}
.grille-saved img{width:100%;aspect-ratio:.8;object-fit:cover;display:block}
.grille-saved .vign.pris{border-color:var(--main);box-shadow:0 0 0 3px var(--main)}
.grille-saved .coch{position:absolute;right:5px;top:5px;width:21px;height:21px;
border-radius:999px;background:var(--main);color:var(--main-foreground);
font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;
border:2px solid var(--border)}
/* 3 et 5 — la rangee de slides */
.rl-slides{display:flex;gap:8px;overflow:hidden;margin-top:6px;
-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent 100%);
mask-image:linear-gradient(90deg,#000 90%,transparent 100%)}
.rl-slides img{flex:0 0 auto;height:210px;width:auto;aspect-ratio:.8;object-fit:cover;
border:2px solid var(--border);border-radius:8px}
/* 4 — la conversion */
.conv{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:8px}
.conv figure{position:relative;margin:0}
.conv img{height:280px;width:auto;display:block;
border:2.5px solid var(--border);border-radius:10px;box-shadow:3px 3px 0 var(--border)}
.conv .et{position:absolute;top:9px;left:9px;font-size:12px;font-weight:900;
padding:3px 8px;border:2px solid var(--border);border-radius:999px;
background:var(--secondary-background)}
.conv .et.d{background:var(--main);color:var(--main-foreground)}
.conv .vers{font-size:26px;opacity:.4;font-weight:700}
.ss-bas{margin:14px 0 0;font-size:12.5px;font-weight:700;opacity:.55;
padding-bottom:38px}
.ss-bas.ok{color:var(--foreground);opacity:.8}
.ss-bas.ok::before{content:"✓ ";color:#2e7d32;font-weight:900}
.modal.parcours .pied{padding-bottom:34px}
/* ── LE TUTORIEL DE L'ACCUEIL — cinq captures du studio reel ──────── */
.tuto{margin:28px auto 0;max-width:820px;outline:none}
.tuto-cadre{position:relative;background:var(--secondary-background);
border:3px solid var(--border);border-radius:16px;box-shadow:6px 6px 0 var(--border);
padding:14px 14px 8px;overflow:hidden}
.tuto .vue{display:none;margin:0}
.tuto .vue.on{display:block}
.tuto .vue img{width:100%;height:auto;display:block;border-radius:9px}
.tuto figcaption{margin-top:11px;font-size:14px;line-height:1.45;opacity:.78;
min-height:42px;padding:0 4px 4px}
.tuto figcaption b{display:inline;font-weight:900;opacity:1}
.tf{position:absolute;top:46%;width:44px;height:44px;
border:2.5px solid var(--border);border-radius:999px;
background:var(--background);font-size:19px;font-weight:700;cursor:pointer;
box-shadow:3px 3px 0 var(--border);transition:transform .15s;z-index:3}
.tf:hover{transform:translate(-1px,-1px)}
.tf.g{left:12px}
.tf.d{right:12px;background:var(--main);color:var(--main-foreground)}
.tuto-pts{display:flex;gap:8px;justify-content:center;margin-top:14px}
.tuto-pts .pt{width:10px;height:10px;padding:0;border-radius:999px;cursor:pointer;
border:2px solid var(--border);background:var(--background)}
.tuto-pts .pt.on{background:var(--main);transform:scale(1.25)}
@media(max-width:620px){.tf{width:36px;height:36px;font-size:16px}.tf.g{left:6px}.tf.d{right:6px}}
/* ── [J1] l'essai gratuit : le texte a gauche, la preuve a droite ──────────
Le bloc occupait toute la largeur pour du texte seul, d'ou le « gros vide a
droite » qu'Ismael a releve le 10/09. La colonne de droite montre les huit
paires original -> reproduction, une a la fois, en fondu. Une ligne verticale
separe les deux moities, comme il l'a decrit. */
.essai2{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
.es-vis{position:relative;min-height:270px;
border-left:3px solid var(--border);padding-left:34px}
.es-vis .ev{position:absolute;left:34px;right:0;top:50%;transform:translateY(-50%);
margin:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.es-vis .ev.on{opacity:1;visibility:visible}
.es-vis .ev img{width:100%;display:block;
border:3px solid var(--border);border-radius:var(--border-radius);
box-shadow:6px 6px 0 var(--border)}
.es-vis .ev figcaption{margin-top:12px;font-size:13.5px;font-weight:800;
text-align:center;line-height:1.3}
@media(max-width:900px){
.essai2{grid-template-columns:1fr;gap:26px}
.es-vis{border-left:0;border-top:3px solid var(--border);
padding-left:0;padding-top:26px;min-height:230px}
.es-vis .ev{left:0}
}
/* ── [L3] les petites « i » du tarif ──────────────────────────────────────
« inclut les petites i, qui, quand on passe la souris dessus, affichent un
pop-up de texte » (10/09 18h41). Elles portent tabindex pour que la bulle
s'ouvre aussi au clavier — sinon la precision n'existe que pour la souris. */
.inf{display:inline-flex;align-items:center;justify-content:center;
width:17px;height:17px;margin-left:4px;vertical-align:1px;
font-size:12px;font-weight:900;font-style:italic;cursor:help;
background:var(--border);color:var(--secondary-background);
border-radius:999px;outline:none}
/* LA BULLE S'ANCRE SUR LA LIGNE, PAS SUR L'ICONE. Centree sur l'icone, elle
debordait de 22 px a 360 et de 21 a 768 quand l'icone tombait pres du bord
droit — mesure du 11/09, defaut introduit la nuit meme. Ancree sur le
,
qui est position:relative, elle ne peut plus sortir de la colonne. */
.inf .bul{position:absolute;left:0;right:0;bottom:calc(100% + 9px);
transform:translateY(4px);
width:auto;max-width:100%;padding:11px 13px;
font-size:12.5px;font-weight:600;font-style:normal;line-height:1.45;
text-align:left;color:var(--foreground);background:var(--secondary-background);
border:2.5px solid var(--border);border-radius:10px;
box-shadow:4px 4px 0 var(--border);
opacity:0;visibility:hidden;pointer-events:none;z-index:50;
transition:opacity .18s ease,transform .18s ease,visibility .18s}
.inf:hover .bul,.inf:focus-visible .bul{opacity:1;visibility:visible;
transform:translateY(0)}
.prix li{position:relative}
/* ── [D2] les emojis eparpilles ───────────────────────────────────────────
« des emojis qui sortent un peu du cadre, comme si c'etait une grande planche,
places un peu partout, pas trop [...] avec de tres legeres animations. Tres
leger » (10/09 18h41). Cinq, aux frontieres de sections, chacun choisi pour la
section qu'il jouxte. L'animation est un @keyframes ordinaire, pas une
animation pilotee par le defilement : Firefox n'execute pas les secondes.
aria-hidden et pointer-events:none — ce sont des ornements, ils ne doivent ni
se lire a voix haute ni intercepter un clic. */
.emo{position:absolute;z-index:3;pointer-events:none;user-select:none;
font-size:clamp(30px,3.4vw,52px);line-height:1;
rotate:var(--r,0deg);
filter:drop-shadow(2px 3px 0 rgba(0,0,0,.16));
animation:emo-flotte 7s ease-in-out infinite}
@keyframes emo-flotte{
0%,100%{translate:0 0}
50% {translate:0 -7px}
}
@media(max-width:760px){ .emo{font-size:26px;opacity:.85} }
@media(prefers-reduced-motion:reduce){ .emo{animation:none} }
/* ── [H2] la fleche d'angle des cartes d'outils ───────────────────────────
« une fleche en bas a droite qui est une icone indiquant qu'on peut cliquer
dessus » (10/09 18h41). Elle vivait a cote du titre. aria-hidden : le lien
porte deja son intitule, la fleche est un signe, pas une information. */
#outils .card.b.o{position:relative}
.fl-cliq{position:absolute;right:16px;bottom:14px;
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;font-size:16px;font-weight:900;
background:var(--main);color:var(--main-foreground);
border:2.5px solid var(--border);border-radius:999px;
box-shadow:2px 2px 0 var(--border);
transition:transform .16s ease,box-shadow .16s ease}
#outils .card.b.o:hover .fl-cliq{transform:translate(2px,-2px);
box-shadow:4px 4px 0 var(--border)}
/* Un padding-right seul ne suffisait pas : le paragraphe descend jusqu'a la
fleche et la recouvrait sur les 8 cartes (mesure du 11/09). Une bande reservee
en bas de carte lui donne sa place, quelle que soit la longueur du texte. */
#outils .card.b.o{padding-bottom:56px}
/* [E4-o] Les typographies d'Instagram, montrees plutot que decrites.
Colonne de gauche a 320px, et ce n'est pas un choix esthetique : le texte
DANS la story mesure ~29 px sur la planche large de 880. A 280 px il tombait
a 9,2 px, sous le plancher de 10 px de [[vignette-cadrage-mandatory]]. A 320,
il fait 10,5 px.
minmax(0,...) sur les deux colonnes : figure.ic est en display:grid, et une
colonne « auto » s'y refere a l'enfant qui s'y refere en retour — le cycle se
resout par la taille intrinseque, pas par la place disponible. C'est le defaut
qui a coute une regression le 11/09 sur le code visuel des paires. */
.typo-ig{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
gap:30px;align-items:stretch;margin-top:14px}
.typo-ig figure.ic{margin:0}
/* space-between plutot qu'un centrage : centre, les trois points laissaient une
bande vide de 940x270 px en haut, au-dessus du seuil de
[[decision-espace-restant]]. Etires, ils occupent la hauteur de la story. */
.tig-l{list-style:none;margin:0;padding:0;display:grid;
align-content:space-between;gap:14px}
.tig-l li{background:var(--secondary-background);
border:2px solid var(--border);border-radius:var(--border-radius);
box-shadow:4px 4px 0 var(--border);
padding:15px 17px;line-height:1.55;
color:var(--main-foreground);font-size:15px}
.tig-l b{color:var(--foreground);display:block;margin-bottom:3px}
@media(max-width:760px){
.typo-ig{grid-template-columns:minmax(0,1fr);gap:18px;justify-items:center}
.typo-ig figure.ic{max-width:320px}
.tig-l li{font-size:14.5px}
}
/* [Z1, 11/09] A 320px, les boutons etaient a l'etroit : 22px de padding de
chaque cote sur un ecran de 320. Ce resserrement les rend respirables.
CE QU'IL NE FAIT PAS : il ne corrige PAS le debordement d'1px mesure a cette
largeur sur 14 des 25 pages. Passer le padding de 22 a 13px a laisse le
debordement a 1,4px et le bouton a 54px — valeurs IDENTIQUES avant et apres.
Un resultat qui ne bouge pas quand sa cause supposee change accuse
l'instrument, pas la page ([[resultat-nul-accuse-linstrument]]). La cause
reelle n'est pas trouvee ; 1px sur 320 ne justifie pas de la chercher plus
longtemps. Note ici pour que personne ne croie le defaut regle. */
@media(max-width:340px){
.btn{padding-left:11px;padding-right:11px;font-size:13.5px}
}
/* [H4] Le texte pose SUR la couverture d'un outil est un ARGUMENT, pas une
decoration : il dit ce que la cliente a a faire, c'est-a-dire presque rien.
Releve chez la réf, dont la couverture « miniature » porte « tout est deja
code » — la mention est un message de plus sur l'effort demande.
Pose en HTML et non cuit dans l'image : le texte reste editable, il porte ses
accents, et une correction ne coute pas un rendu ([[hybride-gemini-genere-l-interface]]).
En BAS A GAUCHE, sur un aplat plein : [[vignette-cadrage-mandatory]] interdit
qu'une etiquette masque de l'information. Le bas des couvertures est la zone
la plus neutre, et l'aplat garantit le contraste quelle que soit l'image. */
#outils .card.b.o{position:relative}
#outils .card.b.o .eff{position:absolute;left:12px;top:12px;z-index:2;
background:#fff;color:#111; /* [Z-10] --main-background n existait pas -> transparent */
border:2px solid var(--border);border-radius:999px;
box-shadow:2.5px 2.5px 0 var(--border);
padding:5px 11px;font-size:12.5px;font-weight:750;line-height:1.25;
max-width:calc(100% - 24px)}
@media(max-width:560px){
#outils .card.b.o .eff{font-size:12px;padding:4px 9px;left:9px;top:9px}
}
/* [E2-c] La planche a TROIS volets : la scene, ta photo, le resultat.
Son intention, verbatim : « comme ca on comprend bien que c'est la meme photo
de moi qui est utilisee au milieu ». La photo du milieu est donc LA MEME dans
les trois planches, et c'est tout le propos.
Son modele nomme : la réf, section « La formule : pas de prompt, une
addition ». D'ou le + et le = entre les volets.
.trio etait deja pris (12 regles) : la collision se verifie AVANT d'ecrire,
c'est ce qui a coute une regression le 10/09. */
.vol3{position:relative;min-height:1px}
.vol3-p{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
gap:14px;align-items:center;
opacity:0;visibility:hidden;position:absolute;inset:0;
transition:opacity .55s ease,visibility .55s}
.vol3-p.actif{opacity:1;visibility:visible;position:relative}
.v3{position:relative;margin:0;overflow:hidden;
border:2.5px solid var(--border);border-radius:var(--border-radius);
box-shadow:5px 5px 0 var(--border);background:var(--secondary-background)}
.v3 img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.v3-op{font-size:30px;font-weight:800;color:var(--border);line-height:1;
text-align:center;user-select:none}
/* la photo du milieu porte le meme trait plein que le resultat : c'est une
entree REELLE, pas une reference exterieure. Seule la scene est en
pointilles, code visuel de la page ([[P1]] : pointilles = reference). */
.vol3-p .v3:first-child{border-style:dashed}
.v3 .lab.m{left:50%;transform:translateX(-50%);background:var(--c3);color:#000}
@media(max-width:760px){
.vol3-p{grid-template-columns:1fr;gap:8px;justify-items:center}
.vol3-p .v3{max-width:300px;width:100%}
.v3-op{font-size:24px}
}
/* [E3-a] La piste des miniatures : plus de cas, et deux fleches pour les
parcourir. Ismael, 10/09 18h20 : « montres plus de paires [...] avec des
fleches a gauche et a droite ».
Defilement NATIF (scroll-snap + scrollBy en JS) : Firefox n'execute pas
animation-timeline, tout ce qui bouge ici doit tenir sans lui. */
.piste-b{position:relative;margin-top:24px;padding:0 26px}
.ap2.mini.piste{display:flex;gap:22px;margin-top:0;align-items:start;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:4px 4px 14px;scrollbar-width:thin}
.ap2.mini.piste > figure{flex:0 0 calc(50% - 15px);min-width:0;scroll-snap-align:start}
/* Une SOLO prend la MOITIE du slot d'une paire : son image fait alors la meme
taille que chacune des deux d'une paire. Sans ca, une image solo pleine
largeur est deux fois plus haute, et le flex etirait toutes les paires a
cette hauteur — d'ou la bande vide sous les legendes (mesure du 11/09). */
.ap2.mini.piste > figure.solo{flex:0 0 calc(25% - 13.5px)}
.ap2 .duo.solo{grid-template-columns:1fr}
.piste-b .fl{position:absolute;top:calc(50% - 22px);z-index:4;
width:44px;height:44px;border-radius:999px;cursor:pointer;
background:#fff;color:#111; /* [Z-10] --main-background n existait pas -> transparent */
border:2.5px solid var(--border);box-shadow:3px 3px 0 var(--border);
font-size:26px;line-height:1;font-weight:900;
display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.piste-b .fl:hover{transform:translate(1.5px,1.5px);box-shadow:1.5px 1.5px 0 var(--border)}
.piste-b .fl.g{left:0}
.piste-b .fl.d{right:0}
.piste-b .fl[disabled]{opacity:.32;cursor:default;
transform:none;box-shadow:3px 3px 0 var(--border)}
@media(max-width:760px){
.ap2.mini.piste > figure{flex:0 0 calc(100% - 8px)}
.ap2.mini.piste > figure.solo{flex:0 0 calc(50% - 15px)}
.piste-b{padding:0 18px}
}
/* [E4-m][E4-p] Les sequences de stories : trois bandes de 3 ecrans consecutifs
d'un MEME highlight, avec la barre segmentee d'Instagram (un segment par
story de la sequence, les 3 montrees en plein). Remplace le mur de 15
stories isolees : le titre disait « sequences », les images n'en etaient
pas — c'etait le defaut E4-m. */
.seqs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:14px 0 6px}
.seq{margin:0;padding:10px;background:var(--secondary-background);
border:2.5px solid var(--border);border-radius:14px;box-shadow:4px 4px 0 var(--border)}
.seq-barre{display:flex;gap:2.5px;margin:2px 2px 8px}
.seq-barre i{flex:1;height:3.5px;border-radius:2px;background:var(--border);opacity:.22}
.seq-barre i.vu{opacity:1;background:var(--main)}
.seq-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.seq-3 .ic{margin:0}
.seq-3 .ic img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
border:2px solid var(--border);border-radius:8px}
.seq figcaption{font-size:12.5px;line-height:1.45;padding:9px 3px 2px}
@media(max-width:900px){.seqs{grid-template-columns:1fr}}
/* [L3] Les groupes du bloc tarif, structure clonee de la section pricing de
la réf (groupes nommes Image / Video / suivi / moteurs), adaptee a UN plan :
pas de colonnes, pas de toggle mensuel-annuel. */
.card.prix .px-gr{margin:18px 0 6px;font-size:12px;font-weight:900;
letter-spacing:.09em;text-transform:uppercase;opacity:.62}
.card.prix .px-gr:first-of-type{margin-top:14px}
.card.prix ul{margin:0}
/* [W2, 11/09 21h50] une carte sur trois du mur montre L'ORIGINALE par defaut,
uniformement repartie ; le survol la retourne vers la refaite. */
.mq-c.duo.mq-inv .mq-f{transform:rotateY(180deg)}
.mq-c.duo.mq-inv:hover .mq-f{transform:rotateY(0deg)}
.mq-c.duo.mq-inv .mq-p1{display:none}
.mq-c.duo.mq-inv .mq-p2{display:inline-block}
.mq-c.duo.mq-inv:hover .mq-p1{display:inline-block}
.mq-c.duo.mq-inv:hover .mq-p2{display:none}
/* [W8, 11/09 21h50] paires en deux figures separees, structure cas-usage la réf.
Code visuel P1 conserve : pointille = reference, trait plein = a toi. */
.wpr{margin:0;min-width:0}
.wpr .wpr-duo{display:flex;align-items:center;gap:12px}
.wpr .wpr-i,.wpr .wpr-r{position:relative;flex:1;min-width:0}
.wpr .wpr-i img,.wpr .wpr-r img{display:block;width:100%;height:auto;border-radius:5px}
.wpr .wpr-i img{border:3px dashed var(--border);opacity:.94}
.wpr .wpr-r img{border:3px solid var(--border);box-shadow:6px 6px 0 0 var(--border)}
.wpr .pil{position:absolute;top:-11px;left:12px;z-index:2}
.wpr .wpr-fl{display:flex;flex:0 0 38px;height:38px;width:38px;align-items:center;
justify-content:center;border:2px solid var(--border);border-radius:50%;
background:var(--c4);color:#fff;font-weight:900;font-size:17px;
box-shadow:3px 3px 0 0 var(--border)}
.wpr figcaption{margin-top:16px;font-size:13.5px;font-weight:800;text-align:center}
@media(max-width:760px){ .wpr .wpr-fl{flex-basis:30px;height:30px;width:30px} }
/* [W6, 11/09 21h50] les sequences en PLUS GROS : une sequence par rangee,
chaque ecran 9:16 large au lieu des vignettes serrees. */
.seqs{grid-template-columns:1fr;gap:26px;max-width:920px;margin-left:auto;margin-right:auto}
.seq-3{max-width:840px;margin:0 auto}
/* [W7, 11/09 21h50] la maquette du panneau studio des stories. */
.tigs{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:26px;
align-items:start;max-width:920px;margin:18px auto 0}
.tig-p img{border:3px solid var(--border);border-radius:6px;
box-shadow:6px 6px 0 0 var(--border)}
.tig-s{border:2px solid var(--border);border-radius:6px;padding:22px 24px;
background:var(--secondary-background);box-shadow:6px 6px 0 0 var(--border)}
.tig-t{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
color:color-mix(in srgb,var(--foreground) 50%,transparent);margin:18px 0 8px}
.tig-t:first-child{margin-top:0}
.tig-champ{border:2px solid var(--border);border-radius:5px;padding:12px 14px;
font-size:15.5px;font-weight:600;background:#fff;position:relative}
.tig-curseur{display:inline-block;width:2px;height:1.05em;background:var(--foreground);
vertical-align:text-bottom;margin-left:2px;animation:tig-cl 1.1s steps(1) infinite}
@keyframes tig-cl{50%{opacity:0}}
.tig-note{font-size:12.5px;line-height:1.5;margin:8px 0 0;
color:color-mix(in srgb,var(--foreground) 62%,transparent)}
.tig-styles{display:flex;flex-wrap:wrap;gap:9px}
.tst{display:inline-block;padding:7px 14px;border:2px solid var(--border);
border-radius:999px;font-size:13.5px;line-height:1;cursor:default}
.tst.actif{outline:3px solid var(--main);outline-offset:2px}
.tst-classic{font-family:"Archivo",sans-serif;font-weight:800;background:#fff}
.tst-strong{font-family:"Archivo",sans-serif;font-weight:900;background:var(--foreground);
color:var(--background);border-color:var(--foreground)}
.tst-type{font-family:"Courier New",monospace;font-weight:700;background:#f4efe3}
.tst-lit{font-family:Georgia,"Literata",serif;font-weight:600;background:#fff}
.tst-neon{font-family:"Archivo",sans-serif;font-weight:800;background:#111;color:#7dfbff;
border-color:#111;text-shadow:0 0 7px rgba(125,251,255,.85)}
.tst-mod{font-family:"Archivo",sans-serif;font-weight:400;letter-spacing:.12em;
text-transform:uppercase;background:#fff}
.tig-taille{padding:4px 2px}
.tig-rail{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--foreground) 22%,transparent);position:relative;max-width:260px}
.tig-pouce{position:absolute;left:38%;top:50%;transform:translate(-50%,-50%);
width:18px;height:18px;border-radius:50%;background:var(--main);
border:2px solid var(--border)}
@media(max-width:820px){ .tigs{grid-template-columns:1fr;justify-items:center}
.tig-s{width:100%} }
/* [W4/W5, 11/09 21h50] la grille « Meme magie » : 2 colonnes x 3 rangees,
chaque cellule = reference -> repliquee en 16:9. */
.mmx{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;margin-top:20px}
.wpr.m169 .wpr-i img,.wpr.m169 .wpr-r img{aspect-ratio:16/9;object-fit:cover}
.wpr.m169 .pil svg{vertical-align:-1px;margin-right:2px}
@media(max-width:820px){ .mmx{grid-template-columns:1fr} }
/* ── [W6] LE PARCOURS DU CLONEUR DE STORIES — cinq écrans réels ──────
Même dispositif que le parcours du Cloneur de Carrousel (voile + modal
+ jauge + flèches). Préfixe stp- : les classes courtes et génériques
ont déjà produit trois collisions (.duo global, 11/09). */
.stp-pills{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.stp-pill{font-size:12px;font-weight:800;padding:6px 13px;border:2px solid var(--border);
border-radius:999px;background:var(--secondary-background);cursor:pointer;font-family:inherit}
.stp-pill.on{background:var(--main);color:var(--main-foreground)}
.stp-seqs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stp-seq{margin:0;transition:opacity .25s}
.stp-seq.off{opacity:.22}
.stp-barre{display:flex;gap:3px;margin-bottom:6px}
.stp-barre i{flex:1;height:3px;border-radius:2px;background:var(--border);opacity:.22}
.stp-barre i.vu{opacity:1;background:var(--main)}
.stp-3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.stp-3 img{width:100%;aspect-ratio:.5625;object-fit:cover;display:block;
border:2px solid var(--border);border-radius:6px}
.stp-seq figcaption{font-size:12px;margin-top:7px;font-weight:700;opacity:.8;line-height:1.35}
.stp-cat{display:inline-block;font-size:12px;font-weight:900;text-transform:uppercase;
letter-spacing:.04em;padding:2px 8px;border:1.5px solid var(--border);border-radius:999px;
margin:0 4px 4px 0;background:var(--secondary-background)}
.stp-gal{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:4px}
.stp-gal .stp-ph{position:relative;padding:0;border:2.5px solid var(--border);border-radius:8px;
overflow:hidden;background:none;cursor:pointer}
.stp-gal img{width:100%;aspect-ratio:.8;object-fit:cover;display:block}
.stp-gal .stp-ph.off{display:none}
.stp-icl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;margin:0 0 8px}
.stp-icl img{width:20px;height:20px}
.stp-duo{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:8px}
.stp-duo figure{position:relative;margin:0;text-align:center}
.stp-duo img{height:250px;width:auto;display:block;border-radius:10px;
border:2.5px solid var(--border);box-shadow:3px 3px 0 var(--border)}
.stp-duo figure.stp-ref img{border-style:dashed;box-shadow:none}
.stp-duo .stp-et{position:absolute;top:9px;left:9px;font-size:12px;font-weight:900;
padding:3px 8px;border:2px solid var(--border);border-radius:999px;
background:var(--secondary-background)}
.stp-duo .stp-et.d{background:var(--main);color:var(--main-foreground)}
.stp-duo figcaption{font-size:12px;font-weight:700;opacity:.8;margin-top:7px;max-width:210px}
.stp-vers{font-size:26px;opacity:.4;font-weight:700}
.stp-hasard{margin-top:12px;font-size:12.5px;font-weight:800;padding:8px 14px;
border:2px solid var(--border);border-radius:999px;background:var(--secondary-background);
cursor:pointer;font-family:inherit}
.stp-stats{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;
align-items:start;margin-top:6px}
.stp-stats>figure{margin:0}
.stp-stats>figure img{width:100%;display:block;border:2.5px solid var(--border);
border-radius:10px;box-shadow:3px 3px 0 var(--border)}
.stp-stats>figure figcaption{font-size:12px;opacity:.65;margin-top:6px;line-height:1.35}
.stp-meca{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.stp-meca li{font-size:13.5px;line-height:1.5;padding-left:24px;position:relative}
.stp-meca li::before{content:"✓";position:absolute;left:2px;color:#2e7d32;font-weight:900}
.stp-tigs .tigs{gap:18px;margin-top:6px;grid-template-columns:minmax(0,200px) minmax(0,1fr)}
@media(max-width:760px){
.stp-seqs{grid-template-columns:1fr}
.stp-gal{grid-template-columns:repeat(4,1fr)}
.stp-stats{grid-template-columns:1fr}
.stp-duo{flex-wrap:wrap}
}
/* le hero : cinq cartes portrait flottantes, légère rotation alternée */
.op-cartes{display:flex;gap:14px;justify-content:center;align-items:center;
margin-top:38px;flex-wrap:wrap}
.op-cartes figure{margin:0;flex:0 0 auto;border:2.5px solid var(--border);
border-radius:12px;overflow:hidden;background:var(--background);
box-shadow:4px 4px 0 var(--border);transform:rotate(var(--rot,0deg))}
/* [Z-24/Z-34, 14/09] LE CADRE SUIT L'IMAGE, jamais l'inverse : hauteur commune
par éventail (--oph, surchargée par page), largeur au ratio NATUREL, zéro
recadrage. L'ancien 128×214 croppait des slides 4:5 ET des covers 16:9. */
.op-cartes img{height:var(--oph,256px);width:auto;display:block}
.op-cartes figure:nth-child(odd){--rot:-2.2deg}
.op-cartes figure:nth-child(even){--rot:1.8deg;margin-top:16px}
.op-cartes figure:nth-child(3){--rot:0deg;margin-top:-8px}
.op-cartes figure:nth-child(3) img{height:calc(var(--oph,256px)*1.17)}
/* les deux modes nommés : deux colonnes, chacune sa paire et son récit */
.op-modes{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:32px}
.op-mode{border:2.5px solid var(--border);border-radius:var(--border-radius);
background:var(--background);box-shadow:var(--box-shadow-x) var(--box-shadow-y) 0 var(--border);
padding:20px}
.op-mode h3{margin:0 0 6px;font-size:18px}
.op-mode p{font-size:14.5px;line-height:1.55;margin:0 0 14px}
.op-mode .duo{margin:0}
/* le triplet : objet + inspiration = résultat */
.op-tri{display:grid;grid-template-columns:1fr auto 1fr auto 1.2fr;gap:10px;
align-items:center}
.op-tri figure{margin:0;position:relative}
.op-tri img{width:100%;display:block;border:2.5px solid var(--border);border-radius:8px}
.op-tri figure:nth-child(1) img,.op-tri figure:nth-child(3) img{border-style:dashed}
.op-tri .sg{font-size:22px;font-weight:800;opacity:.45;text-align:center}
.op-tri figcaption{font-size:12px;font-weight:700;opacity:.75;margin-top:5px;text-align:center}
/* le curseur avant / après — aucune bibliothèque, clavier compris */
.op-ba{position:relative;max-width:560px;margin:30px auto 0;border:2.5px solid var(--border);
border-radius:12px;overflow:hidden;box-shadow:5px 5px 0 var(--border);
user-select:none}
.op-ba img{width:100%;display:block}
.op-ba .ap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.op-ba .ap img{position:absolute;inset:0;height:100%;object-fit:cover}
.op-ba .barre{position:absolute;top:0;bottom:0;left:var(--x,50%);width:4px;
background:var(--border);transform:translateX(-50%)}
.op-ba .barre::after{content:"↔";position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;
background:var(--main);color:var(--main-foreground);border:2.5px solid var(--border);
display:grid;place-items:center;font-weight:900;font-size:16px}
.op-ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;
opacity:0;cursor:ew-resize;margin:0}
.op-ba .et{position:absolute;top:10px;font-size:12px;font-weight:900;
padding:3px 9px;border:2px solid var(--border);border-radius:999px;
background:var(--secondary-background);z-index:2}
.op-ba .et.g{left:10px}
.op-ba .et.d{right:10px;background:var(--main);color:var(--main-foreground)}
.op-ba-lg{font-size:12px;font-weight:700;opacity:.65;text-align:center;margin-top:10px}
/* la grille filtrable par pastilles (bibliothèque de séquences) */
.op-chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 18px;justify-content:center}
.op-chip{font:inherit;font-size:13px;font-weight:800;padding:7px 15px;cursor:pointer;
border:2px solid var(--border);border-radius:999px;background:var(--background)}
.op-chip.on{background:var(--main);color:var(--main-foreground);
box-shadow:2px 2px 0 var(--border)}
.op-filtre{transition:opacity .25s}
.op-filtre.off{opacity:.18}
/* la grille de six cas en texte seul */
.op-txg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.op-txg .c{border:2px solid var(--border);border-radius:var(--border-radius);
background:var(--background);padding:16px 17px;box-shadow:3px 3px 0 var(--border)}
.op-txg .c h3{margin:0 0 6px;font-size:15.5px}
.op-txg .c p{margin:0;font-size:13.5px;line-height:1.5;opacity:.85}
/* la liste de bénéfices à flèches */
.op-fl{margin:26px auto 0;padding:0;list-style:none;max-width:620px;display:grid;gap:12px}
.op-fl li{font-size:15.5px;line-height:1.55;padding:12px 16px 12px 44px;position:relative;
border:2px solid var(--border);border-radius:var(--border-radius);
background:var(--background)}
.op-fl li::before{content:"→";position:absolute;left:15px;font-weight:900;color:var(--main)}
/* la capture d'interface, encadrée comme un écran */
.op-ui{max-width:1000px;margin:30px auto 0} /* [16/09] un ecran se lit, 780 le rendait minuscule */
.op-ui img{width:100%;display:block;border:3px solid var(--border);border-radius:14px;
box-shadow:6px 6px 0 var(--border);background:var(--secondary-background)}
.op-ui figcaption{font-size:12.5px;font-weight:700;opacity:.7;margin-top:10px;text-align:center}
/* le récit numéroté sans images (canvas) */
.op-recit{max-width:640px;margin:30px auto 0;display:grid;gap:26px}
.op-recit .t{position:relative;padding-left:64px}
.op-recit .t b{position:absolute;left:0;top:0;font-size:26px;font-weight:900;
color:var(--main);letter-spacing:.02em}
.op-recit .t h3{margin:0 0 5px;font-size:19px}
.op-recit .t p{margin:0;font-size:15px;line-height:1.6;opacity:.88}
/* le bonus : une capacité secondaire mise en avant */
.op-bonus{border:2.5px solid var(--border);border-radius:var(--border-radius);
background:var(--c2);box-shadow:var(--box-shadow-x) var(--box-shadow-y) 0 var(--border);
padding:22px;margin-top:30px;display:grid;grid-template-columns:1fr 1.1fr;gap:22px;
align-items:center}
.op-bonus h3{margin:0 0 7px;font-size:19px}
.op-bonus p{margin:0;font-size:14.5px;line-height:1.55}
.op-bonus .duo{margin:0}
/* découvre aussi : trois cartes paysage 16:10 */
.op-dec{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.op-dec a{display:block;border:2.5px solid var(--border);border-radius:var(--border-radius);
overflow:hidden;background:var(--background);text-decoration:none;color:inherit;
box-shadow:var(--box-shadow-x) var(--box-shadow-y) 0 var(--border);
transition:transform .15s}
.op-dec a:hover{transform:translate(-2px,-2px)}
.op-dec img{width:100%;aspect-ratio:1.6;object-fit:cover;display:block;
border-bottom:2.5px solid var(--border)}
.op-dec .t{padding:12px 14px}
.op-dec h3{margin:0 0 3px;font-size:15.5px}
.op-dec p{margin:0;font-size:12.5px;opacity:.75;line-height:1.4}
@media(max-width:820px){
.op-modes,.op-bonus{grid-template-columns:1fr}
.op-txg{grid-template-columns:1fr}
.op-dec{grid-template-columns:1fr}
.op-tri{grid-template-columns:1fr;gap:6px}
.op-tri .sg{transform:rotate(90deg)}
.op-cartes img{width:96px;height:160px}
.op-cartes figure:nth-child(3) img{width:110px;height:184px}
}
/* variante paysage des cartes du hero (miniatures 16:9, écrans de CRM) */
/* [Z-34, 14/09] paysage : +30 % et ratio NATUREL (l'ancien 216×134 recadrait
les covers 16:9 ; « je ne comprends pas pourquoi tu recadres ces images »). */
.op-cartes.pays{--oph:215px} /* [16/09] 3 covers larges, jamais 4 dont une orpheline */
.op-cartes.pays img{height:var(--oph);width:auto}
.op-cartes.pays figure:nth-child(3) img{height:calc(var(--oph)*1.15)}
@media(max-width:820px){.op-cartes.pays{--oph:110px}}
/* la formule pleine largeur : le meme triplet, en plus grand */
.op-tri-large{max-width:860px;margin:32px auto 0}
.op-tri-large figcaption{font-size:12.5px}
.op-tri-large .sg{font-size:30px}
/* [audit 13/09] .es-txt : colonne texte de .essai2 (grid 1fr 1fr). min-width:0
est la garde standard contre le debordement d'une colonne de grille.
.mq-av : face AVANT du retournement du mur — masquer son dos evite le
miroir fantome quand .mq-f tourne a 180 degres. */
.es-txt{min-width:0}
.mq-av{backface-visibility:hidden}
/* ── [Z-08/Z-09, 14/09] le constructeur bêta des écritures de story ─────────
Le rendu ligne-par-ligne reprend l'atelier du studio (studio-clone.js,
x821) : une bande de fond par ligne, la couleur suit le style. */
.bta-story{position:relative;width:min(300px,100%);aspect-ratio:9/16;border-radius:18px;
border:2.5px solid var(--border);box-shadow:6px 6px 0 var(--border);
overflow:hidden;justify-self:center;background:#141414}
.bta-story .bta-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.bta-story.f-photo .bta-fond{display:block}
.bta-story.f-noir{background:#141414}
.bta-story.f-blanc{background:#f4f2ef}
.bta-story.f-degrade{background:linear-gradient(165deg,#5e5ce6 0%,#0071e3 55%,#2997ff 100%)}
.bta-txt{position:absolute;left:7%;right:7%;text-align:center;display:grid;
justify-items:center;gap:3px;transform:translateY(-50%)}
.bta-txt span{display:inline-block;padding:.18em .55em;border-radius:.45em;line-height:1.25}
.t-classic span{background:#111;color:#fff;font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:700}
.t-strong span{background:#fff;color:#111;font-family:'Arial Narrow','Avenir Next Condensed',Arial,sans-serif;
font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.t-type span{background:rgba(255,255,255,.92);color:#111;font-family:'Courier New',monospace;font-weight:700}
.t-literata span{background:rgba(46,26,22,.88);color:#fff;font-family:Georgia,'Times New Roman',serif}
.t-neon span{background:none;color:#d6ebff;font-family:'Snell Roundhand','Brush Script MT',cursive;
text-shadow:0 0 6px #2997ff,0 0 16px #2997ff,0 0 30px #0071e3}
.t-moderne span{background:rgba(16,52,50,.85);color:#fff;font-family:-apple-system,Arial,sans-serif;
font-weight:300;text-transform:uppercase;letter-spacing:.28em}
.bta-in{border:2px solid var(--border);border-radius:10px;padding:10px 13px;
font:inherit;font-size:14px;width:100%;background:#fff}
.bta-styles,.bta-fonds{display:flex;gap:6px;flex-wrap:wrap}
.bta-styles .tst{cursor:pointer}
/* [28/09 11h55] six styles : 5 + « MODERNE » seul sur sa ligne (gate_mise_en_page, 1024 et 1440, fil 9e 11h21).
Grille fixe : 3 + 3, puis 2 + 2 + 2 sur téléphone. */
.bta-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bta-styles .tst{text-align:center;padding-inline:8px}
@media(max-width:480px){.bta-styles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* cinq onglets de l'accueil : entre 360 et 400 px, « Stories » restait seul sous deux onglets.
Sous 480 px : deux par ligne, le cinquième sur toute la largeur. */
@media(max-width:480px){
.onglets[aria-label="Les familles de visuels"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.onglets[aria-label="Les familles de visuels"] button{justify-content:center}
.onglets[aria-label="Les familles de visuels"]>:last-child{grid-column:1/-1}}
.bta-fonds button,.bta-up{border:2px solid var(--border);background:#fff;border-radius:10px;
padding:6px 11px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.bta-fonds button.actif{background:#FFE14D}
/* [Z-41, 14/09] le CTA de bas de page montre le resultat une derniere fois */
.final-visu{display:block;width:min(620px,92%);margin:0 auto 24px;
border:3px solid var(--border);border-radius:10px;box-shadow:7px 7px 0 var(--border)}
/* [Z-25/Z-37, 14/09] les cards des blocs « entrées » montrent l'INTERFACE
réelle du studio, plus un emoji seul. L'emoji devient discret en coin. */
.card .carte-ui{width:100%;display:block;border:2px solid var(--border);
border-radius:8px;margin-bottom:12px;background:#fff}
/* [16/09] --ir posé par le module (ir_commun) : deux cartes de choix a la meme hauteur,
la capture cadrée sur son coin haut-gauche (la ou vit le contenu d'un écran) */
.card .carte-ui[style*="--ir"]{aspect-ratio:var(--ir);object-fit:cover;object-position:left top}
.card .ic.hors{position:absolute;top:10px;right:10px;margin:0}
.card.b{position:relative}
/* [Z-30, 14/09] le procédé montre, il ne liste plus : une vignette réelle par étape */
.g4 .card .proc-visu,.g3 .card .proc-visu,.g2 .card .proc-visu{width:100%;aspect-ratio:var(--ir,1.6);object-fit:cover;object-position:center 25%;
display:block;border:2px solid var(--border);border-radius:8px;margin:10px 0 12px}
.g2 .card .proc-visu{object-position:left top} /* [16/09] un ecran se lit depuis son coin haut-gauche */
/* ── [H5, 14/09] le triplet RELIÉ : source → traitement → résultat ─────
Ismael, 10/09 : « avec des lignes qui relient chaque bloc » (style des
éditeurs de flux). Trois nœuds, deux fils à pastilles. */
.relie{display:grid;grid-template-columns:1fr auto 1.1fr auto 1.3fr;align-items:center;gap:0;margin-top:26px}
.relie .noeud{border:2.5px solid var(--border);border-radius:14px;background:var(--background);
box-shadow:4px 4px 0 var(--border);padding:10px;min-width:0}
.relie .noeud img{width:100%;height:auto;border-radius:8px;display:block}
.relie .noeud .nlab{display:block;font-size:12.5px;font-weight:800;margin-top:8px;text-align:center}
.relie .noeud.geste{background:var(--c2);text-align:center;padding:16px 14px}
.relie .noeud.geste b{font-size:15px;display:block}
.relie .noeud.geste span{font-size:12.5px;opacity:.75;display:block;margin-top:4px}
.relie .fil{width:44px;height:2.5px;background:var(--border);position:relative;justify-self:center}
.relie .fil::before,.relie .fil::after{content:"";position:absolute;top:50%;transform:translateY(-50%);
width:9px;height:9px;border-radius:50%;background:var(--border)}
.relie .fil::before{left:-3px}
.relie .fil::after{right:-3px}
@media(max-width:820px){.relie{grid-template-columns:1fr;gap:8px}
.relie .fil{width:2.5px;height:30px;justify-self:center}
.relie .fil::before{left:50%;top:-3px;transform:translateX(-50%)}
.relie .fil::after{right:auto;left:50%;top:auto;bottom:-3px;transform:translateX(-50%)}}
/* [Z-21b, 14/09 20h] Le footer de l'accueil passe a six colonnes : les pages
solutions et metiers etaient orphelines (0 lien depuis index, attrape par le
self-test du generateur solutions — le meme defaut que le 08/09 a 07h48).
la réf liste Fonctionnalites / Solutions / Industries dans son footer. */
.cols.six{grid-template-columns:2fr 1.25fr 1.1fr 1fr 1fr .9fr}
@media(max-width:820px){.cols.six{grid-template-columns:1fr}}
/* [28/09 11h50] entre 821 et 1100 px, six colonnes + gouttières de 34 px font 976 px pour 880 d'écran :
la colonne « Légal » sortait et la page défilait de côté (mesure de la 9e, gate_mise_en_page, fil 11h21).
Trois colonnes, le logo sur toute la largeur ; minmax(0,…) pour qu'aucun mot long n'élargisse une colonne. */
.cols.six{grid-template-columns:minmax(0,2fr) minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr)}
@media(min-width:821px) and (max-width:1100px){
.cols.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols.six>:first-child{grid-column:1/-1}}
@media(max-width:820px){.cols.six{grid-template-columns:1fr}}
.pil.pi,.hp-ref figcaption{color:#000} /* blanc sur --c4 = 3,26 ; noir sur --c4 = 5,5.
[27/09 A10] .mq-p2, .px-plan et .px-note retires d'ici : ces correctifs perdaient en specificite
contre les regles d'origine (0,2,0) ; les valeurs sont posees a la source (lignes .prix et .mq-c). */
.prix .px-sep span{color:#666} /* #949494 = 3,03 ; #666 = 5,7 */
h1 mark{padding:12px 13px} /* marge ≥ 12 px du texte au bord du surlignage (gate_marges) */
@media(max-width:640px){
/* l'éventail empilé : à 390 px les cartes se recouvrent, les pastilles aussi (vu sur capture 22/09 22h32) : seule « Toi » reste */
.ph:not([data-moi]) .pil{display:none}
.tag,.eyeb{padding-block:12px} /* sur deux lignes à 390 px, le badge devient une boîte : 12 px du texte au bord */
}
a.btn,.btn,.btn.n{padding-block:12px}
.cas .duo figcaption,.cas-grille.serre .duo figcaption{padding:12px}
/* [22/09 23h05] les légendes des cartes inclinées (.eq) étaient des badges plus larges que la carte : rognées à gauche
(« t studio, sans studio », capture 23h00). Elles passent SOUS l'image, en barre pleine largeur, sur autant de lignes qu'il faut. */
.eq figcaption{position:static;right:auto;top:auto;white-space:normal;text-align:center;padding:12px;
border:0;border-top:2px solid var(--border);border-radius:0;box-shadow:none;background:var(--secondary-background);line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
.eq figure{display:flex;flex-direction:column}
.eq figure img{flex:1 1 auto;min-height:0}
@media(max-width:640px){
/* à 390 px, trois cartes de 110 px par ligne : la légende sous l'image mangeait le visage (capture 23h08). Deux par ligne. */
.eq figure{width:calc(50% - 8px);height:auto}
.eq figure img{height:210px;object-fit:cover}
/* [28/09 12h00] pages solution-* : trois cartes, donc 2 + 1, la troisième (« à tes couleurs », le résultat) seule
sur sa ligne (gate_mise_en_page, 375 px, fil 9e 11h21). La dernière carte d'un nombre impair prend toute la largeur. */
.eq figure:last-child:nth-child(odd){width:100%}
.eq figure:last-child:nth-child(odd) img{height:260px;object-position:50% 20%}
}