/* ==========================================================================
   Joy B2B · joyb2b.fr · les offres · v015 (9/11/2026), portée sur le site au lot 2 de la V2 · préfixe of-
   Le parti : la page déplie le mouvement de la figure de l'accueil en trois arrêts sur image, un par offre. Les hachures
   du départ et le plan en pointillé (l'état des lieux, mesuré puis tracé), quatre savoir-faire montés jusqu'à l'ambition
   et le pilotage à ses premiers réflexes (l'installation, construit chez vous), le pilotage qui se remplit et la ligne
   de l'ambition qui s'allume (l'accompagnement, conduit par votre équipe). Au seuil, le cadran de l'année, animé une
   fois, et sa chute au centre.
   La cohérence, reprise de l'accueil arrêté (v010) : le cadre de la maison partagé en deux, le texte à gauche, l'objet
   à droite, jamais au-dessus du titre ; un seul bord gauche ; les fonds par rôle (le papier pour ce qui se lit, le voile
   pour ce qui se construit chez vous, le blanc pour l'objet posé, le porteur pour l'engagement, puis le pied) ; l'éclat
   en signal seulement ; une grille de 8 px ; les mêmes écarts surtitre / titre / chapeau / objet.
   Les variantes (la chute, les titres de l'installation et de l'accompagnement, le lancement) se choisissent dans la barre de
   relecture, qui ne va pas sur le site.
   ========================================================================== */

/* 1 · les nuances et le rythme ------------------------------------------------------------------------ */
:root{
  --of-u:8px;
  --of-air:clamp(64px,8cqw,96px);              /* le haut et le bas de chaque bloc */
  --of-ecart:clamp(32px,4.4cqw,56px);          /* l'écart des deux colonnes */
  --of-r-titre:16px;                           /* surtitre → titre, titre → chapeau */
  --of-r-objet:32px;                           /* chapeau → objet, objet → suite */
  --of-gris-fort:#45574A;                      /* le texte qui accompagne : 6,4 pour 1 sur le voile, 7,5 sur le papier */
  --of-filet:rgba(21,48,29,.12);               /* le filet d'une carte posée sur le blanc ou le voile */
  --of-ombre-objet:0 1px 2px rgba(21,48,29,.05),0 30px 60px -40px rgba(21,48,29,.34);
  --of-sous:var(--t-sous);
  /* la figure : la barre peinte de l'échelle des verts, le départ hachuré, tous deux de l'accueil (le dessin de la
     maison : la hachure reste plus légère que le vert construit) */
  --of-barre:linear-gradient(0deg,#A7C2AE 0%,#5A8A68 32%,#2C6538 58%,#1C542F 80%,#123B20 100%);
  --of-hachure:#6E937B;
  --of-hachure-fond:var(--voile);
  --of-sortie:cubic-bezier(.22,.61,.36,1);
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--papier)}
.page .cadre{padding-left:max(16px,var(--gouttiere),env(safe-area-inset-left,0px));padding-right:max(16px,var(--gouttiere),env(safe-area-inset-right,0px))}

/* 2 · le commun de la page ----------------------------------------------------------------------------- */
.of .bloc{padding-block:var(--of-air);border-top:0}
.of .surtitre{margin-bottom:var(--of-r-titre)}
.page .of h2{margin-bottom:var(--of-r-titre);max-width:24ch}
.of .chapeau{max-width:60ch;font-size:var(--of-sous);line-height:1.6;color:var(--of-gris-fort)}
.of-deux{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);column-gap:var(--of-ecart);row-gap:clamp(2rem,5cqw,2.8rem);align-items:start}
.of-texte,.of-objet,.of-tete{min-width:0}
/* un bloc d'offre : la tête (titre, chapeau) et les rangs à gauche, la figure à droite ; au téléphone, la figure vient
   juste après le chapeau, avant les rangs : le visuel prend le relais du texte */
.of-corps{grid-template-areas:"tete objet" "rangs objet";row-gap:0}
.of-corps .of-tete{grid-area:tete}
.of-corps .of-objet{grid-area:objet}
.of-corps .of-zone-rangs{grid-area:rangs}
/* l'objet de droite : son haut sur le haut des capitales de la première ligne du titre (h2 à l'interligne 1,15 : la
   demi-interligne moins la hauteur des capitales, 0,22 de la taille) */
.of-corps .of-objet{margin-top:calc(var(--t-h2) * .22)}
@container page (max-width: 960px){
  .of-deux{grid-template-columns:minmax(0,1fr)}
  .of-corps{grid-template-areas:"tete" "objet" "rangs";row-gap:clamp(2rem,5cqw,2.8rem)}
  .of-corps .of-objet{margin-top:0}
  .of-corps .of-zone-rangs{margin-top:0}
}

/* les signes des trois offres : le point d'éclat, les cinq barres, le rond */
.of-sg{display:block;flex:none;width:1rem;height:1rem;color:var(--porteur)}
.of-sg-barres{width:1.25rem;height:.875rem}
/* le surtitre d'un bloc d'offre porte le signe de l'offre à la place du point */
.of-st-barres::before,.of-st-rond::before{width:auto;height:auto;border-radius:0;background:none}
.of-st-barres::before{content:"";width:1.1rem;height:.77rem;background:
  linear-gradient(var(--porteur),var(--porteur)) 0 0/.12rem 100% no-repeat,
  linear-gradient(var(--porteur),var(--porteur)) 25% 0/.12rem 100% no-repeat,
  linear-gradient(var(--porteur),var(--porteur)) 50% 0/.12rem 100% no-repeat,
  linear-gradient(var(--porteur),var(--porteur)) 75% 0/.12rem 100% no-repeat,
  linear-gradient(var(--porteur),var(--porteur)) 100% 0/.12rem 100% no-repeat}
.of-st-rond::before{content:"";width:.78rem;height:.78rem;border-radius:50%;border:1.5px solid var(--porteur)}

/* le libellé en capitales d'un rang, d'une colonne */
.of-lib{display:block;margin:0 0 .3rem;font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--porteur)}
/* le lien d'un bloc : souligné d'éclat, comme sur l'accueil */
.of-lien{margin:var(--of-r-objet) 0 0}
.of-lien a,.of-c-lien a,.of-preuve a{display:inline-flex;align-items:center;gap:.45rem;padding-block:.35rem;font:600 var(--t-ui)/1.4 var(--sans);color:var(--porteur);text-decoration:underline;text-decoration-color:var(--eclat);text-underline-offset:5px;text-decoration-thickness:1px}
.of-lien .ico,.of-c-lien .ico,.of-preuve .ico{width:16px;height:16px;stroke-width:1.8;transition:transform var(--d-geste) var(--douce)}
.of-lien a:hover .ico,.of-c-lien a:hover .ico{transform:translateY(2px)}
.of-lien a[target]:hover .ico,.of-c-lien a[target]:hover .ico,.of-preuve a:hover .ico{transform:translateX(3px)}
@container page (max-width: 760px){ .of-lien a,.of-c-lien a,.of-preuve a{padding-block:.72rem;margin-block:-.37rem} }

/* le mot qui s'explique : le procédé de la maison (.def, la bulle). Le pointillé suit le mot (un soulignement, pas un
   bord de boîte, qui au téléphone flottait sous la zone de toucher), dans le porteur, à 1,5 px : plus net que le trait
   de l'encre à 1 px qui se fondait */
.of .def{border-bottom:0;text-decoration:underline dotted var(--porteur);text-decoration-thickness:1.5px;text-underline-offset:.24em;text-decoration-skip-ink:none}

/* la pastille : le seul contenant d'icône de la page ; un filet du voile foncé la détache du fond */
.of-pastille{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;border-radius:50%;background:var(--voile);box-shadow:inset 0 0 0 1px var(--voile-fonce);color:var(--porteur)}
.of-pastille .ico{width:20px;height:20px}
.voile .of-pastille{background:var(--papier)}

/* le document qu'on tient à la sortie : une page, son nom, sa note, des lignes (le plan, le dispositif, l'année) */
.of-doc{margin:var(--of-r-objet) 0 0}
.of-doc-page{max-width:22rem;padding:1.1rem 1.25rem 1.2rem;background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:.4rem;box-shadow:var(--of-ombre-objet)}
.of-doc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin:0 0 .7rem;padding-bottom:.6rem;border-bottom:1px solid var(--voile-fonce)}
.of-doc-nom{font:500 1.05rem/1.2 var(--serif);color:var(--encre)}
.of-doc-note{font:500 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--porteur)}
.of-doc-page ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.of-doc-page li{display:grid;grid-template-columns:1.1rem minmax(0,1fr) auto;column-gap:.65rem;align-items:center;font-size:.96rem;line-height:1.35;color:var(--encre)}
.of-doc-page .def{justify-self:start}
.of-doc-sem{font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--of-gris-fort);white-space:nowrap}
@container page (max-width: 420px){ .of-doc-page li{grid-template-columns:1.1rem minmax(0,1fr)} .of-doc-sem{grid-column:2} }
.of-doc-page .ico{width:17px;height:17px;color:var(--porteur)}
.of-doc-legende{margin:.8rem 0 0;font-size:var(--t-petit);line-height:1.45;color:var(--of-gris-fort)}
/* la note sous un document */
.of-note{margin:.9rem 0 0;font-size:var(--t-ui);line-height:1.5;color:var(--of-gris-fort)}
/* les titres à juger : l'installation (I1 tournent, I2 du plan, I3 monté), l'accompagnement (P1 les commandes, P2 comme une
   agence) ; le lancement (L2 deux campagnes, L1 une) */
/* votre temps, le prix : des colonnes à la même hauteur */
.of-tp{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:1.2rem var(--of-ecart);margin-top:var(--of-r-objet);padding-top:calc(var(--of-r-objet) - var(--of-u));border-top:1px solid var(--voile-fonce)}
.of-tp p{margin:0;font-size:var(--t-corps);line-height:1.5;color:var(--encre)}
.of-tp .of-lib{margin-bottom:.35rem;font-size:var(--t-surtitre);line-height:1.3}
@container page (max-width: 640px){ .of-tp{grid-template-columns:minmax(0,1fr)} }

/* la preuve : une ligne, et son lien */
.of-preuve{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;margin:var(--of-r-objet) 0 0;padding-top:calc(var(--of-r-objet) - var(--of-u));border-top:1px solid var(--voile-fonce);font-size:var(--t-corps);line-height:1.5;color:var(--encre)}
.of-preuve a{padding-block:.2rem}

/* 3 · le seuil : le titre, les trois phrases, le bouton ; le cadran à droite --------------------------------- */
.page .of-seuil{background:var(--papier);padding-block:clamp(2.2rem,5cqw,4.4rem) clamp(2.8rem,5.6cqw,4.6rem)}
.of-seuil-g{align-items:center}
.of-seuil-texte{min-width:0;container-type:inline-size}
.page .of-seuil h1{font-size:clamp(2rem,11cqi,3.2rem);font-weight:500;line-height:1.04;letter-spacing:-.024em;color:var(--encre);margin:0 0 var(--of-r-objet);max-width:none}
.of-br{display:block}
@container page (min-width: 620px) and (max-width: 960px){ .of-br{display:inline} }
.of-trois{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.of-trois li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);align-items:center;font-size:var(--of-sous);line-height:1.4;color:var(--encre)}
.of-appel{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--of-r-objet)}
.of-appel .btn{white-space:nowrap}
@container page (max-width: 360px){ .of-appel .btn{font-size:.86rem;gap:.6rem;padding:.8rem .9rem} }
/* le cadran : l'anneau de l'année, le point d'éclat en haut, cinq traits, douze, huit ; la chute au centre */
.of-anneau{position:relative;justify-self:end;width:100%;max-width:26rem;margin:0;color:var(--porteur);container-type:inline-size}
.of-cadran{display:block;width:100%;height:auto;overflow:visible}
.of-an-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center;white-space:nowrap;font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,6.8cqi,1.75rem);line-height:1.1;letter-spacing:-.015em;color:var(--porteur)}
/* la chute tient sur ses lignes (le socle pose text-wrap:pretty sur les paragraphes, qui rouvrirait le retour) */
.page .of-an-centre{text-wrap:nowrap}
/* le cadran animé : l'état final est l'état par défaut ; .cd-pret masque tout, .cd-joue déroule la séquence, une fois */
.cd-anneau{stroke-dasharray:var(--c);stroke-dashoffset:0}
.cd-pret .cd-anneau{stroke-dashoffset:var(--c)}
.cd-pret .cd-b,.cd-pret .cd-s,.cd-pret .cd-m,.cd-pret .cd-dot,.cd-pret .cd-echo,.cd-pret ~ .of-an-centre{opacity:0}
.cd-joue .cd-anneau{animation:cd-trace .9s cubic-bezier(.4,0,.2,1) 0ms both}
.cd-joue .cd-dot{animation:cd-paraitre .35s cubic-bezier(.2,.7,.2,1) 900ms both}
.cd-joue .cd-echo{animation:cd-paraitre .5s cubic-bezier(.2,.7,.2,1) 1100ms both}
.cd-joue .cd-onde{animation:cd-onde 1.2s cubic-bezier(.2,.6,.3,1) 1100ms forwards}
.cd-joue .cd-b{animation:cd-trait .32s cubic-bezier(.2,.7,.2,1) calc(1350ms + var(--i) * 130ms) both}
.cd-joue .cd-s{animation:cd-trait .26s cubic-bezier(.2,.7,.2,1) calc(2100ms + var(--i) * 55ms) both}
.cd-joue .cd-m{animation:cd-trait .26s cubic-bezier(.2,.7,.2,1) calc(2850ms + var(--i) * 80ms) both}
.cd-joue ~ .of-an-centre{animation:cd-chute .7s cubic-bezier(.2,.7,.2,1) 3600ms both}
@keyframes cd-trace{from{stroke-dashoffset:var(--c)}to{stroke-dashoffset:0}}
@keyframes cd-paraitre{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes cd-onde{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(2.6)}}
@keyframes cd-trait{from{opacity:0}to{opacity:1}}
@keyframes cd-chute{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion: reduce){ .cd-pret .cd-anneau{stroke-dashoffset:0} .cd-pret .cd-b,.cd-pret .cd-s,.cd-pret .cd-m,.cd-pret .cd-dot,.cd-pret .cd-echo,.cd-pret ~ .of-an-centre{opacity:1} .cd-joue *,.cd-joue ~ .of-an-centre{animation:none!important} }

@container page (max-width: 960px){
  .of-seuil-g{row-gap:clamp(2.4rem,7cqw,3.4rem)}
  .of-anneau{justify-self:center;max-width:22rem}
}

/* 4 · les trois cartes, les mêmes rangs à la même hauteur ------------------------------------------------- */
.of-cartes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);column-gap:clamp(1rem,2.2cqw,1.6rem);row-gap:0}
.of-carte{grid-row:span 7;display:grid;grid-template-rows:subgrid;align-content:start;min-width:0;padding:clamp(1.35rem,2.4cqw,1.85rem) clamp(1.2rem,2.3cqw,1.75rem) clamp(1.1rem,2cqw,1.45rem);background:var(--blanc);border:1px solid var(--of-filet);border-radius:var(--rayon);box-shadow:var(--of-ombre-objet)}
.of-carte-edl{border-color:var(--porteur);box-shadow:inset 0 0 0 .5px var(--porteur),var(--of-ombre-objet)}
.of-c-tag{justify-self:start;align-self:start;display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.05rem;padding:.34rem .74rem .36rem;border-radius:999px;background:var(--voile);font:600 .78rem/1.2 var(--sans);letter-spacing:.01em;color:var(--porteur)}
.of-carte-edl .of-c-tag{background:var(--porteur);color:var(--papier)}
.of-c-tag-point{width:.48rem;height:.48rem;flex:none;border-radius:50%;background:var(--eclat)}
.of-c-tag-sg{width:.8rem;height:.56rem}
.page .of-c-nom{display:flex;align-items:center;gap:.55rem;margin:0;font:600 1.14rem/1.3 var(--sans);letter-spacing:0;color:var(--encre)}
.of-c-sg{width:1.05rem;height:1.05rem}
.of-c-nom .of-sg-barres{width:1.3rem;height:.9rem}
.of-c-duree{display:flex;align-items:baseline;gap:.4rem;margin:.3rem 0 0;font-family:var(--serif);font-weight:500;font-size:1.2rem;line-height:1;letter-spacing:-.01em;color:var(--porteur)}
.of-c-duree b{font-weight:500;font-size:clamp(2.5rem,4.2cqw,3.1rem);letter-spacing:-.03em;line-height:.95}
.of-c-promesse{margin:1rem 0 0;font-size:1.02rem;line-height:1.5;color:var(--encre)}
.of-c-liste{list-style:none;margin:1.25rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--voile);display:grid;gap:.55rem;align-content:start}
.of-c-liste li{display:grid;grid-template-columns:.8rem minmax(0,1fr);gap:.45rem;align-items:start;font-size:.96rem;line-height:1.45;color:var(--of-gris-fort)}
.of-c-puce{color:var(--porteur);font-weight:700}
.of-c-temps{margin:1.25rem 0 0;padding:1rem 0 0;border-top:1px solid var(--voile);font-size:.95rem;line-height:1.45;color:var(--encre)}
.of-c-lien{align-self:end;margin:1.1rem 0 0}
@container page (max-width: 900px){
  .of-cartes{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:1.2rem;max-width:36rem}
  .of-carte{grid-row:auto;grid-template-rows:none}
}

/* ce qui vaut pour les trois : quatre colonnes, chacune repliée, sous les cartes */
.of .of-offres{padding-bottom:calc(var(--of-air) - var(--of-u) * 2)}
.of .of-offres + .of-assure{padding-top:0}
.of-aps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(1.2rem,2.6cqw,2.2rem);row-gap:1.6rem}
.of-ap{min-width:0}
.of-ap>summary{display:grid;grid-template-columns:2.5rem minmax(0,1fr) 1.2rem;grid-template-areas:"ico titre marque" "gist gist gist";column-gap:.8rem;row-gap:.55rem;align-items:center;list-style:none;cursor:pointer}
.of-ap>summary::-webkit-details-marker{display:none}
.of-ap>summary .of-pastille{grid-area:ico}
.of-ap-t{display:contents}
.of-ap-t b{grid-area:titre;display:block;font-weight:600;font-size:.98rem;line-height:1.35;color:var(--encre);white-space:nowrap}
.of-ap-g{grid-area:gist;display:block;font-size:.92rem;line-height:1.5;color:var(--of-gris-fort)}
.of-ap-m{grid-area:marque;align-self:start;width:1.2rem;font-size:1.25rem;line-height:1.3rem;font-weight:400;text-align:right;color:var(--encre)}
.of-ap-m::before{content:"+"}
.of-ap[open] .of-ap-m::before{content:"−"}
.of-ap>summary:hover .of-ap-t b{text-decoration:underline;text-decoration-color:var(--eclat);text-underline-offset:4px;text-decoration-thickness:1px}
.of-ap>p{margin:.6rem 0 0;font-size:.92rem;line-height:1.55;color:var(--of-gris-fort)}
@container page (max-width: 1000px){ .of-aps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container page (max-width: 600px){ .of-aps{grid-template-columns:minmax(0,1fr)} }

/* 5 · la figure de l'accueil, en états ------------------------------------------------------------------- */
.of-graphe{--g-h:clamp(10.5rem,18cqw,14rem);--g-tete:2.3rem;--g-l:clamp(1.8rem,4cqw,3.6rem);margin:0;padding:clamp(20px,2.6cqw,28px) clamp(16px,2.6cqw,32px) clamp(16px,2cqw,22px);background:var(--blanc);border:1px solid var(--voile-fonce);border-radius:var(--rayon);box-shadow:var(--of-ombre-objet)}
.of-champ{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--g-h) + var(--g-tete));border-bottom:1.5px solid var(--encre)}
.of-ambition{position:absolute;left:0;right:0;top:calc(var(--g-tete) - 1.5px);z-index:2;height:3px;margin:0;border-radius:2px;background:var(--encre)}
.of-ambition span{position:absolute;left:0;bottom:calc(100% + .55rem);display:inline-flex;align-items:center;gap:.5rem;font:600 var(--t-surtitre)/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;color:var(--encre)}
.of-ambition span::before{content:"";width:.55rem;height:.55rem;flex:none;border-radius:50%;border:1.5px solid var(--encre);background:var(--blanc);transition:background-color .5s var(--douce),border-color .5s var(--douce)}
.of-ambition::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--eclat);transform-origin:left center;transform:scaleX(0)}
.of-col{position:relative;min-width:0;height:100%}
.of-zone{position:absolute;left:50%;bottom:0;width:var(--g-l);height:var(--g-h);transform:translateX(-50%)}
.of-monte{position:absolute;inset:0;border-radius:5px 5px 0 0;background:var(--of-barre);clip-path:inset(0 0 0 0)}
.of-depart{position:absolute;left:0;right:0;bottom:0;height:calc(var(--d) * 100%);background:repeating-linear-gradient(135deg,var(--of-hachure) 0 1.5px,var(--of-hachure-fond) 1.5px 6px)}
/* le plan : la silhouette de chaque savoir-faire jusqu'à l'ambition, en pointillé */
.of-plan{position:absolute;inset:0;border:1.5px dashed var(--porteur);border-bottom:0;border-radius:5px 5px 0 0;opacity:0}
/* les états. 0, mesuré : les hachures seules. 1, le plan : les silhouettes en pointillé jusqu'à la ligne. 2, construit :
   quatre jusqu'à la ligne, le pilotage à ses premiers réflexes (7 % de sa hauteur au-dessus du départ, moins d'un dixième
   de sa montée) sous son plan en pointillé. 3, conduit : le pilotage rempli, la ligne allumée. */
.of-graphe[data-etat="0"] .of-monte,.of-graphe[data-etat="1"] .of-monte{clip-path:inset(calc((1 - var(--d)) * 100% + 2px) 0 0 0)}
.of-graphe[data-etat="1"] .of-plan{opacity:1}
.of-graphe[data-etat="2"] .of-col:nth-child(6) .of-monte{clip-path:inset(calc((1 - var(--d) - .07) * 100%) 0 0 0)}
.of-graphe[data-etat="2"] .of-col:nth-child(6) .of-plan{opacity:1}
.of-graphe[data-etat="3"] .of-ambition::after{transform:scaleX(1)}
.of-graphe[data-etat="3"] .of-ambition span::before{background:var(--eclat);border-color:var(--eclat)}
/* le mouvement : une fois, quand le lecteur arrive au bloc. Chaque barre se hisse en un temps qui suit sa distance,
   décalées de 260 ms ; la ligne se remplit d'éclat de gauche à droite, d'un seul geste. */
.of-graphe.anime .of-monte{transition:clip-path calc(520ms + (1 - var(--d)) * 900ms) var(--of-sortie) calc(var(--k) * 260ms)}
.of-graphe.anime .of-plan{transition:opacity .6s var(--douce) calc(var(--k) * 120ms)}
.of-graphe.anime .of-ambition::after{transition:transform 1.5s cubic-bezier(.45,.05,.55,.95) .9s}
/* sous les colonnes : l'icône et le nom de chaque savoir-faire, centrés sous leur barre, le mot qui s'explique */
.of-axe{list-style:none;margin:0;padding:.8rem 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.of-axe li{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:.3rem;min-width:0;font-size:var(--t-petit);font-weight:500;line-height:1.25;color:var(--encre);text-align:center}
.of-axe .ico{width:18px;height:18px;color:var(--porteur)}
.of-axe .def{display:inline-block;hyphens:manual}
.of-axe .def .bulle{left:50%;transform:translateX(-50%)}
@container page (max-width: 860px){ .of-axe .def .bulle{transform:none} }
.of-graphe-nom{margin:1rem 0 0;font-size:var(--t-petit);line-height:1.4;color:var(--of-gris-fort)}
@container page (max-width: 520px){ .of-axe li{font-size:.7rem} }

/* 6 · l'état des lieux, l'installation, l'accompagnement : le texte à gauche, la figure à droite ------------- */
.of .of-edl,.of .of-acc{background:var(--papier)}
.of .of-edl{border-top:1px solid var(--voile)}
.of .of-corps{margin-top:0}

/* 7 · les questions : le surtitre, le titre, puis les questions à la suite sur toute la largeur (l'accueil, le Dispositif) */
.of .of-faq{background:var(--papier);border-top:1px solid var(--voile)}
.of-questions{margin-top:var(--of-r-objet);border-top:1px solid var(--voile-fonce)}
.of-q{border-bottom:1px solid var(--voile-fonce)}
.of-q>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:20px 0;font:500 clamp(1.02rem,1.6cqw,1.1rem)/24px var(--sans);color:var(--encre)}
.of-q>summary::-webkit-details-marker{display:none}
.of-q>summary::after{content:"+";font-size:1.25rem;line-height:1;font-weight:400;flex:none}
.of-q[open]>summary::after{content:"−"}
.of-q>p{margin:0;max-width:60ch;padding:0 0 20px;font-size:var(--t-corps);line-height:1.6;color:var(--of-gris-fort)}

/* 8 · l'engagement et la porte : le bloc de l'accueil en préversion ---------------------------------------------
   Deux colonnes : le surtitre, le titre, le texte et le cadre à gauche ; la porte à droite, du haut du texte. La
   porte : la photo et la phrase sur une rangée, le bouton dessous, sans le nom (7/11). Sous 961 px, la lettre, un
   filet, puis la porte. Le cadre s'ouvre ici, avec le lien de l'accueil pour poignée. */
.of .of-eng{background:var(--porteur)}
.of-lettre{display:grid;grid-template-columns:minmax(0,1fr)}
.of-lettre-tete,.of-promesse,.of-porte{min-width:0}
.of-lettre-tete,.of-promesse{max-width:35rem}
.page .of-lettre h2{max-width:none;line-height:1.17;margin-bottom:24px}
.of-lettre-texte{margin:0;font-size:var(--t-lettre);line-height:1.6;color:var(--sur-vert-1)}
.of-cadre{margin:16px 0 0}
.of-cadre>summary{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 0;margin-block:-.25rem;list-style:none;cursor:pointer;font-size:var(--t-lettre);line-height:1.6;color:var(--papier)}
.of-cadre>summary span{text-decoration:underline;text-decoration-color:rgba(253,252,249,.5);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color var(--d-geste)}
.of-cadre>summary:hover span{text-decoration-color:var(--papier)}
.of-cadre>summary::-webkit-details-marker{display:none}
.of-cadre>summary .ico{width:17px;height:17px;stroke-width:1.8;transition:transform var(--d-geste) var(--douce)}
.of-cadre[open]>summary .ico{transform:rotate(90deg)}
.of-cadre dl{display:grid;gap:.9rem;margin:1rem 0 0}
.of-cadre dt{font:600 var(--t-surtitre)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sur-vert-2)}
.of-cadre dd{margin:.25rem 0 0;font-size:.97rem;line-height:1.5;color:var(--sur-vert-1)}
.of-porte{max-width:25rem;margin-top:40px;padding-top:32px;border-top:1px solid var(--filet-vert)}
.of-porte-qui{display:flex;align-items:center;gap:16px;min-width:0}
.of-porte-qui img{display:block;flex:none;width:60px;height:60px;border-radius:50%}
.of-porte-t{margin:0;font-size:var(--t-ui);line-height:1.5;color:var(--sur-vert-1)}
.of-porte .btn{display:flex;width:100%;min-width:0;margin-top:24px}
@container page (max-width: 760px){ .of-porte .btn{padding:.85rem .95rem;gap:.6rem} }
@container page (min-width: 961px){
  .of-lettre{grid-template-columns:minmax(0,1fr) 25rem;grid-template-areas:"tete ." "texte porte";column-gap:var(--of-ecart);align-items:start}
  .of-lettre-tete{grid-area:tete}
  .of-promesse{grid-area:texte}
  .of-porte{grid-area:porte;width:100%;margin-top:0;padding-top:0;border-top:0}
}

/* 10 · le mouvement retenu, et le papier ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){ .of-graphe .of-monte,.of-graphe .of-plan,.of-graphe .of-ambition::after,.of-graphe .of-ambition span::before,.of-ap-m,.of-c-lien .ico,.of-lien .ico{transition:none} }
@media print{
  .of-carte,.of-graphe{box-shadow:none}
  .of-q:not([open])>p,.of-ap:not([open])>p{display:block}
  .of-graphe .of-monte{transition:none}
}