/* ========================================================================= MOSAICA / PARCOURS DE PREINTEGRATION ------------------------------------------------------------------------- Feuille chargee UNIQUEMENT par parcours/pre-integration.html. Prefixe `prep-` exclusivement. POURQUOI UN NOUVEAU FICHIER PLUTOT QU'UNE REECRITURE `assets/parcours-pre-integration.css` (prefixe `pi-`) reste charge par `en/programs/pre-arrival-integration.html`, qui n'est pas dans la portee de cette mission. Le reecrire aurait casse la version anglaise. L'ancien fichier n'est donc PAS du code mort : il est encore vivant pour une autre page. Il devra etre retire le jour ou la page anglaise sera reconstruite. Aucune regle `pi-` ne subsiste dans cette page. CE QUE CETTE PAGE EST Ni une Expertise, ni une fiche de formation : l'application concrete d'une expertise a une periode precise, celle qui precede l'arrivee. Elle ne reprend donc pas le socle `exp-` du dossier expertises/, dont la portee est documentee comme etant celle de cette famille seule. Elle partage en revanche la meme langue visuelle du site : Ibarra Real Nova et Space Grotesk, marine et bleu nuit, gris mineral, or patine, filets fins. Aucun creme : l'ancienne page en avait fait son identite (#f6f3ed, #fbfaf6), la palette actuelle ne le retient pas. PRINCIPE DE COMPOSITION Le geste de la page est LE SEUIL. Une periode preparee a gauche, un passage au centre, un parcours qui continue a droite. L'arrivee n'est pas l'origine du processus : elle en est le milieu. Ce geste se retrouve dans le mecanisme du heros, dans le rail des quatre mouvements et dans la composition relationnelle des deux cotes. PAS DE CARTE PAR DEFAUT Une carte n'apparait que si le contenu a reellement besoin d'un contenant. Partout ailleurs : une ligne, un filet, un espace, une typographie, une relation. Les douze rencontres ne sont pas douze rectangles : ce sont douze lignes editoriales qui se deplient. ANIMATION Les etats d'attente n'existent que sous `html.prep-anim`, posee par le filet du et confirmee par assets/parcours-preintegration.js. Sans JavaScript, sans IntersectionObserver ou en mouvement reduit, la page est complete et tous les panneaux sont ouverts. Deux proprietes seulement : `opacity` et `transform`, plus `stroke-dashoffset` pour le mecanisme. ========================================================================= */ /* ============================== 1. JETONS ============================= */ .prep-page{ --prep-surface:#F2F4F4; --prep-white:#FFFFFF; --prep-mineral:#E8ECEE; --prep-deep:#061F2C; --prep-deep-lift:#0B3448; --prep-navy:var(--navy,#0e4d6c); --prep-navy-deep:var(--navy-deep,#0a3850); --prep-gold:#C7A66A; --prep-gold-soft:#D9BE8C; --prep-gold-ink:#7A5A24; --prep-ink:#37444C; --prep-ink-dim:#59666E; --prep-steel-ink:#4A6A7D; --prep-on-dark:rgba(255,255,255,0.87); --prep-on-dark-dim:rgba(255,255,255,0.70); --prep-rule:rgba(6,31,44,0.14); --prep-rule-dark:rgba(255,255,255,0.20); --prep-hair:rgba(6,31,44,0.10); --prep-stroke:rgba(6,31,44,0.36); --prep-stroke-soft:rgba(6,31,44,0.15); --prep-shell:1240px; --prep-pad:clamp(1.25rem,4vw,3.5rem); --prep-ease:cubic-bezier(.22,.61,.36,1); font-family:'Space Grotesk',sans-serif; color:var(--prep-ink); background:var(--prep-surface); } /* Les zones profondes basculent leurs jetons d'un seul coup. */ .prep-page [data-prep-theme="deep"]{ --prep-rule:rgba(255,255,255,0.20); --prep-hair:rgba(255,255,255,0.12); --prep-stroke:rgba(255,255,255,0.38); --prep-stroke-soft:rgba(255,255,255,0.17); } /* Aucune ancre ne passe sous la barre de navigation. */ .prep-page [id]{scroll-margin-top:calc(var(--prep-nav-h,var(--nav-h,68px)) + 1rem)} /* ===================== 2. SCENES ET CONTENEUR ========================= */ /* Une scene n'impose jamais de hauteur : elle est portee par son contenu. L'ancienne page posait `min-height:780px` sur son heros et `padding:clamp(76px,8vw,132px)` sur chaque section, ce qui produisait des vides considerables sur portable peu haut. */ .prep-scene{position:relative;padding-block:clamp(3rem,7.5vh,5.5rem)} .prep-scene--surface{background:var(--prep-surface)} .prep-scene--white{background:var(--prep-white)} .prep-scene--mineral{background:var(--prep-mineral)} .prep-scene--deep{background:var(--prep-deep-lift)} .prep-scene--night{background:var(--prep-deep)} /* Une scene profonde porte un filet dore en bord haut : le lecteur voit ou il passe d'un registre a l'autre. */ .prep-scene--deep::before, .prep-scene--night::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,var(--prep-gold) 0%,rgba(199,166,106,0.42) 46%,rgba(199,166,106,0.10) 100%); } .prep-shell{ width:min(var(--prep-shell),100%); margin-inline:auto; padding-inline:var(--prep-pad); } .prep-shell > *{min-width:0} .prep-narrow{max-width:74ch} /* ============================ 3. TYPOGRAPHIE ========================== */ .prep-eyebrow{ font-size:0.78rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase;line-height:1.55; color:var(--prep-gold-ink);margin:0 0 1.15rem; } [data-prep-theme="deep"] .prep-eyebrow{color:var(--prep-gold)} .prep-h1{ font-family:'Ibarra Real Nova',serif;font-weight:700; /* L'ancienne page montait a 7,5rem avec `line-height:.86` et `letter-spacing:-.06em` : un titre d'affiche, illisible sous 1100px et coupe en portrait. On revient a une echelle de document. */ font-size:clamp(1.95rem,1.02rem + 2.9vw,3.6rem); line-height:1.09;letter-spacing:-0.012em; color:var(--prep-navy-deep); margin:0 0 1.4rem;max-width:min(96%,34ch); } .prep-h1 em{font-style:normal;color:var(--prep-gold-ink)} .prep-h2{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.55rem,1.05rem + 2.05vw,2.6rem); line-height:1.16;color:var(--prep-navy-deep); margin:0 0 1.2rem;max-width:26ch; } .prep-h2--wide{max-width:34ch} [data-prep-theme="deep"] .prep-h2{color:#fff} .prep-h3{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.26rem,1.05rem + 0.9vw,1.68rem); line-height:1.2;color:var(--prep-navy-deep); margin:0 0 0.8rem;max-width:28ch; } [data-prep-theme="deep"] .prep-h3{color:#fff} .prep-lead{ font-size:clamp(1.08rem,1rem + 0.4vw,1.28rem); line-height:1.66;color:var(--prep-ink); max-width:58ch;margin:0; } [data-prep-theme="deep"] .prep-lead{color:var(--prep-on-dark)} .prep-p{font-size:1.05rem;line-height:1.75;color:var(--prep-ink);max-width:60ch;margin:0} .prep-p + .prep-p{margin-top:1rem} [data-prep-theme="deep"] .prep-p{color:var(--prep-on-dark)} /* Phrase forte : une ligne tenue, jamais une accroche publicitaire. */ .prep-strong{ margin:1.85rem 0 0;padding-left:1.2rem; border-left:2px solid var(--prep-gold); font-family:'Ibarra Real Nova',serif; font-size:clamp(1.16rem,1rem + 0.7vw,1.5rem); line-height:1.45;color:var(--prep-navy);max-width:46ch; } [data-prep-theme="deep"] .prep-strong{color:var(--prep-gold-soft)} /* Precision de portee : une reserve tenue, jamais un avertissement. */ .prep-note{ margin:1.15rem 0 0;padding-left:1rem; border-left:1px solid var(--prep-rule); font-size:0.96rem;line-height:1.62; color:var(--prep-ink-dim);max-width:60ch; } [data-prep-theme="deep"] .prep-note{color:var(--prep-on-dark-dim)} .prep-annot{ margin:0; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--prep-steel-ink);line-height:1.55; } [data-prep-theme="deep"] .prep-annot{color:var(--prep-on-dark-dim)} .prep-crumb{ font-size:0.82rem;line-height:1.6; color:var(--prep-ink-dim);margin-bottom:1.5rem; } .prep-crumb a{color:var(--prep-navy);text-decoration:none;border-bottom:1px solid var(--prep-hair)} .prep-crumb a:hover{color:var(--prep-gold-ink);border-bottom-color:currentColor} .prep-page a:focus-visible, .prep-page button:focus-visible{outline:2px solid var(--prep-gold-ink);outline-offset:3px} [data-prep-theme="deep"] a:focus-visible, [data-prep-theme="deep"] button:focus-visible{outline-color:var(--prep-gold)} /* ========================= 4. ACTIONS ET LIENS ======================== */ .prep-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.9rem 1.7rem;margin-top:2.3rem} .prep-btn{ display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:0.85rem 1.9rem; font-family:'Space Grotesk',sans-serif; font-size:1rem;font-weight:600;line-height:1.3; text-decoration:none;border:1px solid transparent;border-radius:1px; background:var(--prep-navy-deep);color:#fff;border-color:var(--prep-navy-deep); transition:background-color .25s ease,border-color .25s ease; } .prep-btn:hover{background:var(--prep-gold-ink);border-color:var(--prep-gold-ink)} [data-prep-theme="deep"] .prep-btn{background:var(--prep-gold);color:#061F2C;border-color:var(--prep-gold)} [data-prep-theme="deep"] .prep-btn:hover{background:var(--prep-gold-soft);border-color:var(--prep-gold-soft)} .prep-link{ display:inline-flex;align-items:center;gap:0.55rem; margin-top:1.1rem;min-height:44px; font-size:1rem;font-weight:600; color:var(--prep-gold-ink);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:0.1rem; transition:color .22s ease; } .prep-link::after{content:"\2192";font-weight:400} .prep-link:hover{color:var(--prep-navy-deep)} [data-prep-theme="deep"] .prep-link{color:var(--prep-gold)} [data-prep-theme="deep"] .prep-link:hover{color:#fff} /* ====================== 5. LE HEROS ET LE SEUIL ======================= */ /* Aucune hauteur imposee, aucun degrade, aucun halo, aucune forme geometrique decorative, aucune statistique geante : un fond clair, une typographie tenue, et un seul mecanisme qui porte la these. */ .prep-hero{background:var(--prep-surface);padding-block:clamp(2.25rem,5.5vh,4rem)} .prep-hero__lead{max-width:62ch} /* La ligne de mesure du parcours. Elle remplace les quatre compteurs de l'ancien heros : une ligne editoriale, pas un tableau de bord. */ .prep-facts{ list-style:none;margin:1.5rem 0 0;padding:0; display:flex;flex-wrap:wrap; font-size:0.98rem;line-height:1.6;color:var(--prep-ink-dim); } .prep-facts li{padding-right:0.7rem;margin-right:0.7rem;border-right:1px solid var(--prep-rule)} .prep-facts li:last-child{border-right:0;padding-right:0;margin-right:0} .prep-facts b{color:var(--prep-navy-deep);font-weight:600} /* ---- LE MECANISME DU SEUIL ---- Trois zones : une periode preparee, un passage, un parcours qui continue. Douze reperes avant le seuil, aucun apres : ce qui suit l'arrivee appartient a l'expertise, pas a ce parcours. C'est la composition elle meme qui dit ou s'arrete la portee de la page. Le viewBox est tres plat (1160 x 96) et AUCUNE hauteur n'est forcee : forcer une hauteur plus courte que le rapport du viewBox declencherait `preserveAspectRatio`, le dessin serait recentre dans sa boite et les trois libelles HTML ne tomberaient plus sur leurs zones. La coquille etant bornee a 1240px, la bande ne depasse jamais 94px de haut. */ .prep-seuil{margin:clamp(1.75rem,4.5vh,2.75rem) 0 0} .prep-seuil__stage{position:relative} .prep-seuil svg{display:block;width:100%;height:auto} .prep-sl-band{fill:none;stroke:var(--prep-gold);stroke-width:1.8} .prep-sl-dot{fill:var(--prep-gold)} .prep-sl-cross{fill:none;stroke:var(--prep-navy-deep);stroke-width:2.2} .prep-sl-after{fill:none;stroke:var(--prep-stroke);stroke-width:1.2;stroke-dasharray:5 5} .prep-sl-tick{fill:none;stroke:var(--prep-stroke-soft);stroke-width:1} /* Les trois libelles sont du texte HTML, jamais du texte enferme dans le SVG. Ils sont ancres en pourcentage sur les zones du dessin. */ .prep-seuil__keys{ list-style:none;margin:0.55rem 0 0;padding:0; position:relative;height:2.6em; } .prep-seuil__keys li{ position:absolute;top:0; font-size:0.74rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase;line-height:1.4; color:var(--prep-steel-ink); } .prep-seuil__keys li:nth-child(1){left:1.5%} .prep-seuil__keys li:nth-child(2){left:63.8%;transform:translateX(-50%);color:var(--prep-navy-deep)} .prep-seuil__keys li:nth-child(3){right:1.5%;text-align:right} .prep-seuil__claim{ margin:clamp(1.5rem,3.5vh,2.25rem) 0 0;padding-left:1.2rem; border-left:2px solid var(--prep-gold); font-family:'Ibarra Real Nova',serif; font-size:clamp(1.16rem,1rem + 0.7vw,1.5rem); line-height:1.45;color:var(--prep-navy);max-width:46ch; } /* Sequence : environ 2,6 s, jouee une seule fois, sans boucle. */ .prep-anim .prep-seuil.is-in .prep-sl-band{stroke-dasharray:var(--prep-len,660);animation:prepDraw 900ms var(--prep-ease) 120ms both} .prep-anim .prep-seuil.is-in .prep-sl-tick{animation:prepFade 400ms ease 200ms both} .prep-anim .prep-seuil.is-in .prep-sl-dot{transform-box:fill-box;transform-origin:center;animation:prepPop 260ms ease both} .prep-anim .prep-seuil.is-in .prep-sl-g1 .prep-sl-dot{animation-delay:640ms} .prep-anim .prep-seuil.is-in .prep-sl-g2 .prep-sl-dot{animation-delay:800ms} .prep-anim .prep-seuil.is-in .prep-sl-g3 .prep-sl-dot{animation-delay:960ms} .prep-anim .prep-seuil.is-in .prep-sl-g4 .prep-sl-dot{animation-delay:1120ms} .prep-anim .prep-seuil.is-in .prep-sl-cross{stroke-dasharray:var(--prep-len,64);animation:prepDraw 420ms var(--prep-ease) 1400ms both} .prep-anim .prep-seuil.is-in .prep-sl-after{animation:prepFade 620ms ease 1880ms both} .prep-anim .prep-seuil.is-armed .prep-seuil__keys li{opacity:0;transition:opacity .5s ease} .prep-anim .prep-seuil.is-in .prep-seuil__keys li{opacity:1} .prep-anim .prep-seuil.is-in .prep-seuil__keys li:nth-child(1){transition-delay:.62s} .prep-anim .prep-seuil.is-in .prep-seuil__keys li:nth-child(2){transition-delay:1.5s} .prep-anim .prep-seuil.is-in .prep-seuil__keys li:nth-child(3){transition-delay:2s} .prep-anim .prep-seuil.is-armed .prep-seuil__claim{opacity:0;transform:translateY(10px);transition:opacity .6s ease 2.3s,transform .6s var(--prep-ease) 2.3s} .prep-anim .prep-seuil.is-in .prep-seuil__claim{opacity:1;transform:none} /* ============ 6. LES QUESTIONS DE LA PERIODE D'ATTENTE =============== */ /* Ce que cette periode contient deja. Les questions ne sont pas inventees pour la page : chacune correspond a une rencontre reelle du parcours, nommee en regard. C'est ce qui distingue un registre d'une liste de benefices marketing. */ .prep-asks{ list-style:none;margin:clamp(1.75rem,4.5vh,2.75rem) 0 0;padding:0; border-top:1px solid var(--prep-rule); } .prep-asks li{ display:grid; grid-template-columns:minmax(0,0.62fr) minmax(0,0.38fr); gap:0.4rem clamp(1.25rem,3vw,2.5rem); align-items:baseline; padding-block:clamp(0.85rem,2.2vh,1.25rem); border-bottom:1px solid var(--prep-rule); } .prep-asks q{ font-family:'Ibarra Real Nova',serif;font-style:italic; font-size:clamp(1.06rem,1rem + 0.42vw,1.28rem); line-height:1.4;color:var(--prep-navy-deep);quotes:"«\00a0" "\00a0»"; } .prep-asks span{font-size:0.94rem;line-height:1.55;color:var(--prep-ink-dim)} .prep-asks b{ display:block; font-size:0.7rem;font-weight:700;letter-spacing:0.15em; text-transform:uppercase;color:var(--prep-gold-ink);margin-bottom:0.2rem; } /* Ce que la preintegration ne fait pas. Une reserve explicite, tenue par un filet dore : elle appartient a la demonstration, pas aux petits caracteres. */ .prep-scope{ margin-top:clamp(1.75rem,4.5vh,2.75rem); padding-top:1.35rem;border-top:2px solid var(--prep-gold); display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3rem); } .prep-scope__col p{margin:0;font-size:1.01rem;line-height:1.66;color:var(--prep-ink)} .prep-scope__head{ margin:0 0 0.6rem; font-size:0.74rem;font-weight:700;letter-spacing:0.16em; text-transform:uppercase;color:var(--prep-gold-ink); } .prep-scope__col--not .prep-scope__head{color:var(--prep-steel-ink)} .prep-scope__list{list-style:none;margin:0;padding:0} .prep-scope__list li{ position:relative;padding:0.5rem 0 0.5rem 1.3rem; font-size:1rem;line-height:1.56;color:var(--prep-ink); } .prep-scope__list li + li{border-top:1px solid var(--prep-rule)} .prep-scope__list li::before{ content:"";position:absolute;left:0;top:1.25em; width:8px;height:8px;background:var(--prep-gold); } .prep-scope__col--not .prep-scope__list li::before{ background:none;width:9px;height:1px;top:1.3em; border-top:1px solid var(--prep-steel-ink); } /* ============ 7. LES QUATRE MOUVEMENTS ET LES DOUZE RENCONTRES ======== */ /* Ni quatre grandes cartes, ni douze rectangles. Un rail continu, quatre mouvements accroches dessus, et sous chacun trois lignes editoriales qui se deplient. Le rail dit que le parcours progresse ; les lignes disent que chaque rencontre est un moment, pas un produit. */ .prep-moves{ position:relative; margin-top:clamp(1.75rem,4.5vh,2.75rem); padding-left:clamp(1.5rem,3.5vw,2.75rem); } .prep-moves::before{ content:"";position:absolute;left:0;top:0.8rem;bottom:2.75rem; width:1px;background:var(--prep-gold);opacity:.5; } /* Le prolongement pointille : apres la douzieme rencontre, le parcours continue — mais ailleurs, et c'est l'expertise qui le prend en charge. */ .prep-moves::after{ content:"";position:absolute;left:0;bottom:0;height:2.75rem; border-left:1px dashed var(--prep-gold);opacity:.5; } .prep-move{position:relative;padding-block:clamp(1.5rem,3.5vh,2.25rem)} .prep-move + .prep-move{border-top:1px solid var(--prep-rule)} .prep-move::before{ content:"";position:absolute; left:calc(-1 * clamp(1.5rem,3.5vw,2.75rem) - 5px); top:calc(clamp(1.5rem,3.5vh,2.25rem) + 0.55em); width:11px;height:11px;background:var(--prep-gold); } .prep-move__head{ display:grid;grid-template-columns:auto minmax(0,1fr); gap:0.35rem 1.25rem;align-items:baseline; margin-bottom:1.1rem; } .prep-move__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.3rem,1.1rem + 0.6vw,1.72rem); line-height:1;color:var(--prep-gold-ink); } .prep-move__name{margin:0;grid-column:2} .prep-move__say{ grid-column:2;margin:0.35rem 0 0; font-size:1.01rem;line-height:1.66;color:var(--prep-ink-dim);max-width:62ch; } /* ---- Une rencontre : un titre cliquable, un panneau depliable ---- */ .prep-meets{border-top:1px solid var(--prep-rule)} .prep-meet{border-bottom:1px solid var(--prep-rule)} .prep-meet__head{margin:0;font-size:1rem;font-weight:400} .prep-meet__btn{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; gap:0.3rem 1.1rem; width:100%; padding:0.9rem 0; background:none;border:0; font-family:inherit;text-align:left; color:inherit;cursor:pointer; } .prep-meet__n{ font-size:0.76rem;font-weight:700;letter-spacing:0.1em; color:var(--prep-gold-ink); } .prep-meet__title{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.1rem,1rem + 0.48vw,1.34rem); line-height:1.28;color:var(--prep-navy-deep); } .prep-meet__title em{ display:block;font-style:normal; font-family:'Space Grotesk',sans-serif;font-weight:400; font-size:0.94rem;line-height:1.5; color:var(--prep-ink-dim);margin-top:0.2rem; } .prep-meet__btn:hover .prep-meet__title{color:var(--prep-gold-ink)} /* Le signe d'etat : deux traits, dont l'un disparait a l'ouverture. Jamais une fleche pivotante, jamais une icone generique. */ .prep-meet__sign{position:relative;display:block;width:13px;height:13px;flex:none} .prep-meet__sign::before, .prep-meet__sign::after{ content:"";position:absolute;background:var(--prep-gold-ink); transition:opacity .2s ease; } .prep-meet__sign::before{left:0;right:0;top:6px;height:1.5px} .prep-meet__sign::after{top:0;bottom:0;left:6px;width:1.5px} .prep-meet__btn[aria-expanded="true"] .prep-meet__sign::after{opacity:0} .prep-meet__btn:focus-visible{outline:2px solid var(--prep-gold-ink);outline-offset:2px} .prep-meet__panel{padding:0 0 1.4rem} .prep-meet__panel[hidden]{display:none} .prep-meet__meta{ margin:0 0 1.1rem;padding-bottom:0.85rem; border-bottom:1px solid var(--prep-hair); font-size:0.86rem;line-height:1.6;color:var(--prep-ink-dim); } .prep-meet__meta b{ font-weight:700;letter-spacing:0.13em;text-transform:uppercase; font-size:0.7rem;color:var(--prep-steel-ink); } /* Les intervenants sont des libelles de role, pas une phrase : ils passent a la ligne et sont tenus en registre par un separateur, pour que leurs capitales ne detonnent pas au milieu d'une prose. */ .prep-meet__with{display:block;margin-top:0.3rem} .prep-meet__with b{margin-right:0.4rem} /* Quatre rubriques, pas douze. Les champs du fichier de donnees sont regroupes : objectifs et programme forment ensemble « ce que nous travaillons » ; livrable, resultat et contribution forment ensemble « ce qui reste apres ». */ .prep-meet__grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,3vw,2.5rem); } .prep-meet__lbl{ margin:0 0 0.5rem; font-size:0.7rem;font-weight:700;letter-spacing:0.15em; text-transform:uppercase;color:var(--prep-gold-ink); } .prep-meet__grid p{margin:0;font-size:1rem;line-height:1.66;color:var(--prep-ink)} .prep-meet__objs{list-style:none;margin:0;padding:0} .prep-meet__objs li{ position:relative;padding:0.3rem 0 0.3rem 1.2rem; font-size:1rem;line-height:1.56;color:var(--prep-ink); } .prep-meet__objs li::before{ content:"";position:absolute;left:0;top:1.05em; width:7px;height:7px;background:var(--prep-gold);opacity:.8; } /* Le programme : une suite, pas une seconde liste a puces. */ .prep-meet__prog{ margin-top:0.7rem !important;padding-top:0.7rem; border-top:1px solid var(--prep-hair); font-size:0.94rem !important;line-height:1.6 !important; color:var(--prep-ink-dim) !important; } .prep-meet__prog b{ display:block; font-size:0.68rem;font-weight:700;letter-spacing:0.14em; text-transform:uppercase;color:var(--prep-steel-ink);margin-bottom:0.25rem; } .prep-meet__keep{ margin-top:0.6rem !important;padding-left:1rem; border-left:2px solid var(--prep-gold); font-family:'Ibarra Real Nova',serif; font-size:1.06rem !important;line-height:1.45 !important; color:var(--prep-navy) !important; } .prep-meet__contrib{ margin:1.2rem 0 0;padding-top:0.85rem; border-top:1px solid var(--prep-hair); font-size:0.94rem;line-height:1.6;color:var(--prep-ink-dim); } .prep-meet__contrib b{ font-weight:700;letter-spacing:0.14em;text-transform:uppercase; font-size:0.68rem;color:var(--prep-steel-ink);margin-right:0.45rem; } /* ============ 8. LA PREPARATION DES DEUX COTES ======================= */ /* Ni trois cartes, ni trois colonnes egales. Deux cotes qui se preparent, et entre eux un espace tenu : Mosaica structure cet espace, elle n'est pas un troisieme acteur equivalent aux deux autres. */ .prep-sides{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(1.5rem,3.5vw,3rem); align-items:stretch; margin-top:clamp(1.75rem,4.5vh,2.75rem); } .prep-side{padding-top:1.2rem;border-top:2px solid var(--prep-gold)} .prep-side__who{ margin:0 0 0.85rem; font-size:0.76rem;font-weight:700;letter-spacing:0.16em; text-transform:uppercase;color:var(--prep-navy-deep); } .prep-side__list{list-style:none;margin:0;padding:0} .prep-side__list li{ padding-block:0.6rem; border-bottom:1px solid var(--prep-rule); font-size:1rem;line-height:1.58;color:var(--prep-ink); } .prep-side__list li:last-child{border-bottom:0} /* L'espace de preparation : une colonne etroite, deux filets et un libelle vertical. Aucun rectangle, aucun logo, aucun badge. */ .prep-between{ position:relative; display:flex;align-items:center;justify-content:center; min-width:clamp(3rem,7vw,5.5rem); padding-block:1.2rem; } .prep-between::before, .prep-between::after{ content:"";position:absolute;top:0;bottom:0;width:1px; background:var(--prep-gold);opacity:.45; } .prep-between::before{left:0} .prep-between::after{right:0} .prep-between span{ writing-mode:vertical-rl;transform:rotate(180deg); font-size:0.7rem;font-weight:700;letter-spacing:0.2em; text-transform:uppercase;color:var(--prep-gold-ink); text-align:center;line-height:1.5; } .prep-sides__note{ margin:1.35rem 0 0; font-size:1rem;line-height:1.7;color:var(--prep-ink-dim);max-width:70ch; } /* ============ 9. LE PROJET QUI NE VOYAGE PAS SEUL ==================== */ .prep-family{ list-style:none;margin:clamp(1.75rem,4.5vh,2.75rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(1.5rem,4vw,3rem); border-top:1px solid var(--prep-rule); } .prep-family li{ padding-block:0.85rem; border-bottom:1px solid var(--prep-rule); font-size:1rem;line-height:1.56;color:var(--prep-ink); } .prep-family b{ display:block; font-size:0.72rem;font-weight:700;letter-spacing:0.15em; text-transform:uppercase;color:var(--prep-gold-ink);margin-bottom:0.25rem; } /* ============ 10. CE QUE LES RENCONTRES PRODUISENT =================== */ /* Cinq natures de production. Chacune est justifiee par des livrables reellement documentes dans le fichier de donnees, cites tels quels : c'est ce qui empeche cette section de devenir cinq benefices generiques. */ .prep-yield{ margin-top:clamp(1.75rem,4.5vh,2.75rem); border-top:1px solid var(--prep-rule-dark); } .prep-yield__row{ display:grid; grid-template-columns:minmax(0,0.34fr) minmax(0,0.66fr); gap:0.5rem clamp(1.25rem,3vw,2.75rem); align-items:start; padding-block:clamp(1rem,2.6vh,1.5rem); border-bottom:1px solid var(--prep-rule-dark); } .prep-yield__kind{ margin:0; font-family:'Ibarra Real Nova',serif; font-size:clamp(1.1rem,1rem + 0.5vw,1.34rem); line-height:1.32;color:var(--prep-gold-soft); } .prep-yield__has{margin:0;font-size:1rem;line-height:1.66;color:var(--prep-on-dark)} .prep-yield__has b{ display:block; font-size:0.68rem;font-weight:700;letter-spacing:0.15em; text-transform:uppercase;color:var(--prep-on-dark-dim);margin-bottom:0.35rem; } /* Les livrables cites : une suite de traces reelles, jamais des badges. */ .prep-yield__from{ margin:0.5rem 0 0; font-size:0.92rem;line-height:1.6;color:var(--prep-on-dark-dim); } .prep-yield__from i{font-style:italic} /* ============ 11. L'AUTONOMIE ======================================== */ .prep-auto{ list-style:none;margin:clamp(1.5rem,4vh,2.25rem) 0 0;padding:1.2rem 0 0; border-top:2px solid var(--prep-gold); display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,5vw,4rem); } .prep-auto li{ position:relative;padding:0.7rem 0 0.7rem 1.35rem; border-bottom:1px solid var(--prep-rule); font-size:1.01rem;line-height:1.56;color:var(--prep-ink); } .prep-auto li::before{ content:"";position:absolute;left:0;top:1.25em; width:9px;height:1px;background:var(--prep-gold); } /* ============ 12. CONSTRUIRE LE PARCOURS ============================= */ .prep-build{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3rem); margin-top:clamp(1.75rem,4.5vh,2.75rem); } .prep-build__col{padding-top:1.2rem;border-top:1px solid var(--prep-rule)} .prep-build__col--fixed{border-top:2px solid var(--prep-gold)} .prep-build__head{ margin:0 0 0.3rem; font-size:0.74rem;font-weight:700;letter-spacing:0.16em; text-transform:uppercase;color:var(--prep-gold-ink); } .prep-build__say{margin:0 0 0.8rem;font-size:0.94rem;line-height:1.55;color:var(--prep-ink-dim)} .prep-build__list{list-style:none;margin:0;padding:0} .prep-build__list li{ padding-block:0.55rem; border-top:1px solid var(--prep-rule); font-size:1rem;line-height:1.56;color:var(--prep-ink); } /* Les intervenants reels : la preuve que le parcours n'est pas une personne devant une camera. Une suite de roles, pas des vignettes. */ .prep-who{ list-style:none;margin:clamp(1.5rem,4vh,2.25rem) 0 0;padding:1.15rem 0 0; border-top:1px solid var(--prep-rule); display:flex;flex-wrap:wrap; font-size:0.98rem;line-height:1.7;color:var(--prep-ink-dim); } .prep-who li{padding-right:0.7rem;margin-right:0.7rem;border-right:1px solid var(--prep-rule)} .prep-who li:last-child{border-right:0;padding-right:0;margin-right:0} /* ============ 13. LA FIN DE PAGE ===================================== */ .prep-end__sign{ margin:1.4rem 0 0; font-size:1.05rem;line-height:1.75;color:var(--prep-on-dark);max-width:66ch; } /* ============ 14. REVELATIONS (ARMEES) =============================== */ /* Les etats d'attente n'existent que sous `html.prep-anim`. Le contenu n'est donc jamais masque par le seul fait de charger la page. */ @keyframes prepFade{from{opacity:0}} @keyframes prepPop{from{opacity:0;transform:scale(.4)}} @keyframes prepDraw{from{stroke-dashoffset:var(--prep-len,600)}} .prep-anim [data-prep-in]{ opacity:0;transform:translateY(16px); transition:opacity .7s ease,transform .7s var(--prep-ease); } .prep-anim [data-prep-in].is-in{opacity:1;transform:none} .prep-anim [data-prep-in][data-prep-delay="1"]{transition-delay:.14s} .prep-anim [data-prep-in][data-prep-delay="2"]{transition-delay:.28s} /* Le heros ne se revele jamais : titre, sous-titre et mesures sont lisibles au premier rendu, sans delai ni saut. */ .prep-anim .prep-hero [data-prep-in]{opacity:1;transform:none;transition:none} /* ==================== 15. TABLETTE (<= 1080px) ======================= */ @media(max-width:1080px){ .prep-asks li{grid-template-columns:minmax(0,1fr);gap:0.4rem} .prep-scope{grid-template-columns:minmax(0,1fr);gap:1.5rem} .prep-meet__grid{grid-template-columns:minmax(0,1fr);gap:1.35rem} .prep-family{grid-template-columns:repeat(2,minmax(0,1fr))} .prep-yield__row{grid-template-columns:minmax(0,1fr);gap:0.55rem} .prep-auto{grid-template-columns:minmax(0,1fr);column-gap:0} .prep-build{grid-template-columns:minmax(0,1fr);gap:1.75rem} /* LES DEUX COTES SE SUPERPOSENT. L'espace de preparation cesse d'etre une colonne verticale entre les deux : il devient une bande horizontale qui les separe, et garde donc exactement le meme sens. */ .prep-sides{grid-template-columns:minmax(0,1fr);gap:0} .prep-between{ min-width:0;padding-block:0.9rem;margin-block:1.5rem; justify-content:flex-start; } .prep-between::before, .prep-between::after{left:0;right:0;top:auto;bottom:auto;width:auto;height:1px} .prep-between::before{top:0} .prep-between::after{bottom:0} .prep-between span{writing-mode:horizontal-tb;transform:none;text-align:left} } /* ==================== 16. TELEPHONE (<= 900px) ======================= */ @media(max-width:900px){ .prep-scene{padding-block:clamp(2.5rem,6.5vh,3.5rem)} .prep-hero{padding-block:clamp(1.75rem,4.5vh,2.5rem)} .prep-family{grid-template-columns:minmax(0,1fr)} .prep-actions{gap:0.85rem;flex-direction:column;align-items:stretch} .prep-btn{width:100%} .prep-facts li, .prep-who li{padding-right:0.55rem;margin-right:0.55rem} .prep-moves{padding-left:1.15rem} .prep-move::before{left:-1.15rem} .prep-move__head{grid-template-columns:auto minmax(0,1fr);gap:0.3rem 0.9rem} /* La cible tactile du titre de rencontre reste confortable. */ .prep-meet__btn{grid-template-columns:auto minmax(0,1fr) auto;padding:1rem 0;min-height:56px} .prep-crumb a{display:inline-block;padding-block:0.4rem;margin-block:-0.4rem} /* LE MECANISME DU SEUIL DEVIENT VERTICAL. La bande large ne serait plus lisible : elle cede la place a la meme lecture, portee par le texte et par un seuil horizontal. Les trois libelles quittent leur ancrage en pourcentage et redeviennent une suite verticale, le seuil marque au milieu. */ .prep-seuil__stage{display:none} .prep-seuil__keys{height:auto;display:block} .prep-seuil__keys li{ position:static;left:auto;right:auto;transform:none;text-align:left; display:block;padding:0.7rem 0 0.7rem 1.5rem; border-top:1px solid var(--prep-rule); } .prep-seuil__keys li::before{ content:"";position:absolute;left:0; width:9px;height:9px;margin-top:0.28em;background:var(--prep-gold); } .prep-seuil__keys li{position:relative} /* Le seuil : c'est le libelle du milieu qui le porte, par un filet pleine largeur et un repere plus marque. */ .prep-seuil__keys li:nth-child(2){ border-top:2px solid var(--prep-navy-deep); padding-top:0.9rem; } .prep-seuil__keys li:nth-child(2)::before{ width:11px;height:11px;background:var(--prep-navy-deep); } .prep-seuil__keys li:nth-child(3)::before{background:none;border-top:1px dashed var(--prep-gold);height:0;width:11px;margin-top:0.7em} /* Reprise de la hierarchie typographique face a mobile-premium.css, qui impose sous 900px `main p, main li, main span { font-size:max(1em,13px) !important }`. Sur une page qui porte sa propre echelle, `1em` vaut la taille du PARENT : toute la hierarchie disparaitrait. Les selecteurs de mobile-premium pesent (0,2,3) : on repasse devant avec trois classes, jamais avec un !important arbitraire. */ .prep-page .prep-shell .prep-p{font-size:16px !important;line-height:1.72 !important} .prep-page .prep-shell .prep-lead{font-size:17px !important;line-height:1.66 !important} .prep-page .prep-shell .prep-strong, .prep-page .prep-shell .prep-seuil__claim{font-size:clamp(1.15rem,4.8vw,1.4rem) !important;line-height:1.44 !important} .prep-page .prep-shell .prep-note{font-size:15px !important;line-height:1.62 !important} .prep-page .prep-shell .prep-eyebrow{font-size:13.5px !important;letter-spacing:0.15em} .prep-page .prep-shell .prep-crumb, .prep-page .prep-shell .prep-crumb a{font-size:13px !important} .prep-page .prep-shell .prep-btn, .prep-page .prep-shell .prep-link{font-size:16px !important} .prep-page .prep-shell .prep-h3{font-size:19px !important;line-height:1.22 !important} .prep-page .prep-shell .prep-h2{font-size:clamp(1.5rem,6.2vw,2rem) !important;line-height:1.18 !important} .prep-page .prep-shell .prep-h1{font-size:clamp(1.95rem,8vw,2.6rem) !important;line-height:1.12 !important} .prep-page .prep-shell .prep-facts, .prep-page .prep-shell .prep-who{font-size:15px !important;line-height:1.65 !important} .prep-page .prep-shell .prep-asks q{font-size:17px !important;line-height:1.42 !important} .prep-page .prep-shell .prep-asks span{font-size:15px !important} .prep-page .prep-shell .prep-scope__col p, .prep-page .prep-shell .prep-scope__list li, .prep-page .prep-shell .prep-side__list li, .prep-page .prep-shell .prep-family li, .prep-page .prep-shell .prep-auto li, .prep-page .prep-shell .prep-build__list li, .prep-page .prep-shell .prep-meet__grid p, .prep-page .prep-shell .prep-meet__objs li, .prep-page .prep-shell .prep-yield__has{font-size:16px !important;line-height:1.62 !important} .prep-page .prep-shell .prep-move__say, .prep-page .prep-shell .prep-sides__note, .prep-page .prep-shell .prep-end__sign{font-size:16px !important;line-height:1.7 !important} .prep-page .prep-shell .prep-meet__title{font-size:18px !important;line-height:1.28 !important} .prep-page .prep-shell .prep-meet__title em{font-size:14.5px !important} .prep-page .prep-shell .prep-meet__meta, .prep-page .prep-shell .prep-meet__prog, .prep-page .prep-shell .prep-meet__contrib, .prep-page .prep-shell .prep-yield__from, .prep-page .prep-shell .prep-build__say{font-size:14.5px !important;line-height:1.6 !important} .prep-page .prep-shell .prep-meet__keep{font-size:17px !important;line-height:1.45 !important} .prep-page .prep-shell .prep-yield__kind{font-size:18px !important;line-height:1.32 !important} .prep-page .prep-shell .prep-move__n{font-size:1.35rem !important} .prep-page .prep-shell .prep-annot, .prep-page .prep-shell .prep-side__who, .prep-page .prep-shell .prep-scope__head, .prep-page .prep-shell .prep-build__head, .prep-page .prep-shell .prep-family b, .prep-page .prep-shell .prep-seuil__keys li{font-size:13px !important;letter-spacing:0.15em} .prep-page .prep-shell .prep-meet__lbl, .prep-page .prep-shell .prep-meet__n, .prep-page .prep-shell .prep-meet__meta b, .prep-page .prep-shell .prep-meet__prog b, .prep-page .prep-shell .prep-meet__contrib b, .prep-page .prep-shell .prep-yield__has b, .prep-page .prep-shell .prep-asks b, .prep-page .prep-shell .prep-between span{font-size:12.5px !important} } @media(max-width:640px){ .prep-move__head{gap:0.25rem 0.8rem} .prep-meet__btn{gap:0.25rem 0.8rem} } @media(max-width:420px){ .prep-shell{padding-inline:1.15rem} .prep-h1{max-width:none} } /* Ordinateur portable peu haut : on resserre les respirations, jamais la taille des titres. */ @media(min-width:1081px) and (max-height:800px){ .prep-scene{padding-block:clamp(2.25rem,5vh,3.5rem)} .prep-hero{padding-block:clamp(1.75rem,4vh,2.75rem)} .prep-h1{font-size:clamp(1.95rem,1.02rem + 2.55vw,3.2rem)} .prep-strong{margin-top:1.35rem} } /* Telephone en paysage : la hauteur utile fond, aucune scene ne vise plus un ecran plein. */ @media(orientation:landscape) and (max-height:520px){ .prep-scene{padding-block:clamp(2rem,7vh,3rem)} .prep-hero{padding-block:clamp(1.5rem,6vh,2.25rem)} } /* ============ 17. VERSION SANS MOUVEMENT ============================= */ /* Toute l'information apparait immediatement, dans son etat final, et aucun deplacement ne se produit. Les interactions restent entierement disponibles : les panneaux se deplient toujours. */ @media(prefers-reduced-motion:reduce){ .prep-page *, .prep-page *::before, .prep-page *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .prep-page [data-prep-in], .prep-page [data-prep-in].is-in{opacity:1 !important;transform:none !important} .prep-page .prep-seuil__keys li, .prep-page .prep-seuil__claim, .prep-page .prep-sl-dot, .prep-page .prep-sl-tick, .prep-page .prep-sl-after{opacity:1 !important;transform:none !important} .prep-page .prep-sl-band, .prep-page .prep-sl-cross{stroke-dasharray:none !important;stroke-dashoffset:0 !important} } /* ========================================================================= 18. REFONTE PREMIUM — SECTIONS APRES LE HEROS (FR uniquement) ------------------------------------------------------------------------- Le heros `.prep-hero` et son mecanisme `.prep-seuil` ne sont PAS touches. Ce bloc ne fait qu'AJOUTER les composants des sections refondues : la comparaison, la preuve terrain, la photo, les douze rencontres en quatre mouvements, les deux modes de deploiement, les douze traces, le double mouvement et le double CTA. Aucune regle existante n'est modifiee : la page anglaise, qui partage cette feuille, garde exactement son rendu. Meme langue visuelle : Ibarra Real Nova / Space Grotesk, marine et or patine, filets fins, aucune carte sans raison, or avec retenue. ========================================================================= */ /* ---- S2 · La comparaison ------------------------------------------------ */ .prep-vs{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.25rem); margin-top:clamp(1.75rem,4.5vh,2.75rem); } .prep-vs__col{padding-top:1.2rem;border-top:2px solid var(--prep-gold)} .prep-vs__col--before{border-top-color:var(--prep-stroke-soft)} .prep-vs__head{ margin:0 0 0.85rem; font-size:0.76rem;font-weight:700;letter-spacing:0.16em; text-transform:uppercase;color:var(--prep-navy-deep); } .prep-vs__col--before .prep-vs__head{color:var(--prep-steel-ink)} .prep-vs__list{list-style:none;margin:0;padding:0} .prep-vs__list li{ position:relative;padding:0.6rem 0 0.6rem 1.35rem; border-bottom:1px solid var(--prep-rule); font-size:1.01rem;line-height:1.55;color:var(--prep-ink); } .prep-vs__list li:last-child{border-bottom:0} .prep-vs__list li::before{ content:"";position:absolute;left:0;top:1.15em; width:8px;height:8px;background:var(--prep-gold); } .prep-vs__col--before .prep-vs__list li{color:var(--prep-ink-dim)} .prep-vs__col--before .prep-vs__list li::before{ background:none;width:9px;height:1px;top:1.3em; border-top:1px solid var(--prep-steel-ink); } /* ---- S3 · Preuve terrain : les logos ---------------------------------- */ /* Fichiers PNG/WebP a transparence reelle (fond blanc retire au flood fill). Les logos flottent directement sur le fond de la section : aucun carton, aucune tuile, aucun cadre, aucune ombre. */ .prep-logos{ list-style:none; margin:clamp(2rem,5vh,3rem) 0 0; padding:clamp(0.5rem,2vw,1.25rem) 0; display:grid;grid-template-columns:repeat(3,1fr); align-items:center;gap:clamp(1.5rem,5vw,4.5rem); background:transparent; } .prep-logos__item{ display:flex;align-items:center;justify-content:center;min-width:0; background:transparent;border:0;box-shadow:none; } .prep-logo{ display:block;width:auto;height:auto;object-fit:contain; background:transparent;border:0;box-shadow:none; } .prep-logo--wide{max-height:clamp(28px,4.4vw,44px);max-width:100%} .prep-logo--tall{max-height:clamp(46px,7vw,68px);max-width:100%} .prep-logos__note{ margin:clamp(1.5rem,3.5vh,2.25rem) 0 0;max-width:62ch; font-size:1rem;line-height:1.7;color:var(--prep-ink-dim); } /* ---- S4 · Le parcours en action : la photo --------------------------- */ .prep-terrain{ display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1fr); gap:clamp(1.75rem,5vw,4rem);align-items:center; } .prep-terrain__media{margin:0;max-width:560px} .prep-terrain__media picture{display:block} .prep-terrain__media img{ display:block;width:100%;height:auto; border:1px solid var(--prep-rule); box-shadow:0 18px 40px -24px rgba(6,31,44,0.45); } .prep-terrain__text .prep-h2{margin-bottom:1rem} /* ---- S5 · Douze rencontres, quatre mouvements ----------------------- */ .prep-flow{ margin-top:clamp(1.75rem,4.5vh,2.75rem); display:grid;gap:clamp(1.75rem,4.5vh,2.75rem); } .prep-mvt{border-top:1px solid var(--prep-rule);padding-top:clamp(1.4rem,3.5vh,2rem)} .prep-mvt__head{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:0.4rem 1.15rem;margin-bottom:1.2rem; } .prep-mvt__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.35rem,1.1rem + 0.7vw,1.8rem); line-height:1;color:var(--prep-gold-ink);align-self:baseline; } .prep-mvt__name{ margin:0;align-self:baseline; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.24rem,1.05rem + 0.85vw,1.6rem); line-height:1.2;color:var(--prep-navy-deep); } /* Progression legere d'un mouvement a l'autre : un rail qui se remplit, or sur acier, jamais une couleur par etape. */ .prep-mvt__rail{ display:block;width:clamp(56px,11vw,120px);height:3px; background:var(--prep-stroke-soft);position:relative; } .prep-mvt__rail i{ position:absolute;left:0;top:0;bottom:0; width:var(--fill,25%);background:var(--prep-gold); } .prep-mvt__list{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.6vw,2rem); } .prep-rdv{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.9rem; padding-top:0.9rem;border-top:1px solid var(--prep-gold); } .prep-rdv__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:1.05rem;line-height:1.1;color:var(--prep-gold-ink); } .prep-rdv__body{min-width:0} .prep-rdv__title{ margin:0 0 0.4rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.06rem,1rem + 0.4vw,1.22rem); line-height:1.28;color:var(--prep-navy-deep); } .prep-rdv__say{margin:0;font-size:0.96rem;line-height:1.6;color:var(--prep-ink)} .prep-rdv__with{ margin:0.55rem 0 0; font-size:0.72rem;font-weight:700;letter-spacing:0.11em; text-transform:uppercase;color:var(--prep-steel-ink);line-height:1.5; } /* ---- S6 · Les deux modes de deploiement --------------------------- */ .prep-modes{ display:grid;grid-template-columns:1.12fr 0.88fr; gap:clamp(1.25rem,3.5vw,2.5rem); margin-top:clamp(1.75rem,4.5vh,2.75rem);align-items:start; } .prep-mode{padding-top:1.25rem;border-top:1px solid var(--prep-rule)} /* Le parcours complet reste, visuellement, la solution principale. */ .prep-mode--main{ border-top:2px solid var(--prep-gold); background:var(--prep-white); padding:clamp(1.5rem,3vw,2.35rem); box-shadow:0 20px 46px -30px rgba(6,31,44,0.42); } .prep-mode__tag{ margin:0 0 0.7rem; font-size:0.72rem;font-weight:700;letter-spacing:0.16em; text-transform:uppercase;color:var(--prep-gold-ink); } .prep-mode--focus .prep-mode__tag{color:var(--prep-steel-ink)} .prep-mode__name{ margin:0 0 0.6rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.3rem,1.05rem + 1vw,1.7rem); line-height:1.18;color:var(--prep-navy-deep); } .prep-mode__say{margin:0 0 1rem;font-size:1.02rem;line-height:1.66;color:var(--prep-ink)} .prep-mode__list{list-style:none;margin:0;padding:0} .prep-mode__list li{ position:relative;padding:0.5rem 0 0.5rem 1.3rem; border-top:1px solid var(--prep-rule); font-size:1rem;line-height:1.55;color:var(--prep-ink); } .prep-mode__list li::before{ content:"";position:absolute;left:0;top:1.2em; width:8px;height:8px;background:var(--prep-gold); } /* Une intervention ciblee : des exemples tenus en registre, jamais des cases a cocher ni un catalogue tarifaire. */ .prep-mode__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem} .prep-mode__chips li{ padding:0.4rem 0.8rem; border:1px solid var(--prep-stroke-soft); font-size:0.86rem;line-height:1.3;color:var(--prep-ink-dim); } /* ---- S7 · Douze traces (zone profonde) --------------------------- */ .prep-traces{ list-style:none;margin:clamp(1.75rem,4.5vh,2.75rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(4,1fr); gap:1px;background:var(--prep-rule-dark); border:1px solid var(--prep-rule-dark); } .prep-traces li{ position:relative;background:var(--prep-deep); padding:clamp(1rem,2.4vw,1.5rem); min-height:5.5rem;display:flex;align-items:flex-end; font-family:'Ibarra Real Nova',serif; font-size:clamp(1rem,0.95rem + 0.35vw,1.16rem); line-height:1.3;color:var(--prep-on-dark); } .prep-traces li::before{ content:"";position:absolute; left:clamp(1rem,2.4vw,1.5rem);top:clamp(1rem,2.4vw,1.5rem); width:16px;height:2px;background:var(--prep-gold); } /* ---- S8 · Le double mouvement ---------------------------------- */ .prep-duo{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.25rem); margin-top:clamp(1.75rem,4.5vh,2.75rem); } .prep-duo__col{padding-top:1.2rem;border-top:2px solid var(--prep-gold)} .prep-duo__who{ margin:0 0 0.85rem; font-size:0.76rem;font-weight:700;letter-spacing:0.16em; text-transform:uppercase;color:var(--prep-navy-deep); } .prep-duo__list{list-style:none;margin:0;padding:0} .prep-duo__list li{ padding:0.6rem 0;border-bottom:1px solid var(--prep-rule); font-size:1.05rem;line-height:1.5;color:var(--prep-ink); } .prep-duo__list li:last-child{border-bottom:0} /* ---- S10 · Le CTA secondaire, discret ------------------------- */ .prep-cta-second{ display:inline-flex;align-items:center;min-height:44px; font-size:0.96rem;font-weight:500; color:var(--prep-on-dark-dim);text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.28);padding-bottom:0.1rem; transition:color .2s ease,border-color .2s ease; } .prep-cta-second:hover{color:#fff;border-bottom-color:#fff} /* ---- Tablette (<= 1080px) ------------------------------------- */ @media(max-width:1080px){ .prep-mvt__list{grid-template-columns:minmax(0,1fr);gap:0} .prep-rdv{padding-block:1rem;border-top:1px solid var(--prep-rule)} .prep-rdv:first-child{border-top-color:var(--prep-gold)} } /* ---- Telephone (<= 900px) ----------------------------------- */ @media(max-width:900px){ .prep-vs, .prep-duo, .prep-modes, .prep-terrain{grid-template-columns:minmax(0,1fr);gap:1.5rem} .prep-terrain__media{max-width:none;order:-1} .prep-traces{grid-template-columns:repeat(2,1fr)} .prep-traces li{min-height:4.75rem} .prep-logos{gap:2rem clamp(1.25rem,5vw,3rem)} .prep-mvt__head{grid-template-columns:auto minmax(0,1fr)} .prep-mvt__rail{grid-column:1 / -1;width:100%;margin-top:0.7rem} .prep-cta-second{justify-content:center;text-align:center} /* Plancher mobile-premium.css : `main p/li/span/h3/h4/a` sont ramenes a `max(1em,13px) !important`. Sur une page qui porte sa propre echelle, `1em` vaut la taille du parent : la hierarchie s'effondrerait. On repasse devant avec trois classes (0,3,1), jamais un !important nu. */ .prep-page .prep-shell .prep-vs__list li, .prep-page .prep-shell .prep-mode__list li, .prep-page .prep-shell .prep-duo__list li{font-size:16px !important;line-height:1.55 !important} .prep-page .prep-shell .prep-rdv__say, .prep-page .prep-shell .prep-mode__say, .prep-page .prep-shell .prep-logos__note{font-size:15px !important;line-height:1.62 !important} .prep-page .prep-shell .prep-rdv__title{font-size:17px !important;line-height:1.28 !important} .prep-page .prep-shell .prep-mvt__name{font-size:20px !important;line-height:1.2 !important} .prep-page .prep-shell .prep-mode__name{font-size:20px !important;line-height:1.2 !important} .prep-page .prep-shell .prep-mvt__n{font-size:1.4rem !important} .prep-page .prep-shell .prep-rdv__n{font-size:1rem !important} .prep-page .prep-shell .prep-traces li{font-size:16px !important;line-height:1.3 !important} .prep-page .prep-shell .prep-cta-second{font-size:15px !important} .prep-page .prep-shell .prep-vs__head, .prep-page .prep-shell .prep-duo__who, .prep-page .prep-shell .prep-mode__tag{font-size:13px !important;letter-spacing:0.15em} .prep-page .prep-shell .prep-rdv__with{font-size:12.5px !important} .prep-page .prep-shell .prep-mode__chips li{font-size:13px !important} } @media(max-width:560px){ .prep-logos{grid-template-columns:minmax(0,1fr);gap:1.75rem} .prep-logo--wide{max-height:38px} .prep-logo--tall{max-height:58px} .prep-traces{grid-template-columns:minmax(0,1fr)} .prep-traces li{min-height:0;padding-block:1.15rem} }