/* =========================================================================
   ONEO. Cabinet de management de transition et de placement en regie.

   Palette cyanotype, d'apres un plan cadastral insole sur tissu. Le fond
   #103246 est le bleu du tirage, et tout le texte reprend la creme passee
   des traits du plan : #EFEBD0 pour l'encre, deux cremes assourdies pour
   le texte secondaire, #F0D8A4 pour les etats interactifs.
   Ces cremes sont calees sur le fond REELLEMENT RENDU, texture comprise,
   et non sur la couleur declaree. Piege a retenir : sur fond sombre, une
   couche de bruit gris n'assombrit plus, elle ECLAIRCIT. Les trois memes
   couches qui faisaient descendre la luminance du papier clair la
   faisaient ici passer de 0.0495 a 0.0877, soit pres du double. D'ou un
   fond de base plus sombre et des opacites reduites.
   Les filets sont d'un bleu a peine plus clair que le fond, comme les
   traits secondaires d'un plan. Le sable #CBA96A ne porte aucun texte : il
   ne sert qu'au filet de trois pixels en tete de page.
   Deux serif et une sans. Noto Serif Display, variable et a contraste
   eleve, porte le sigle et les grands titres : elle veut de grandes
   tailles, d'ou l'echelle. Source Serif 4, plus robuste a petite taille,
   tient les sous-titres, les questions frequentes et l'adresse de contact.
   Public Sans pour le texte courant. Filets, aucun angle arrondi.

   UN SEUL MONDE VISUEL. Pas de variante sombre, ni par preference systeme
   ni par choix explicite du lecteur.
   Consequence a tenir : toute couleur s'ecrit ici en dur, et le fond du
   body reste peint explicitement. Sans cela la page emprunte le fond de
   son hote, et chez un visiteur en theme clair la creme du texte tomberait
   sur du blanc.

   Historique utile. La page s'adressait a deux audiences en deux colonnes
   strictement identiques, entreprises et independants, et cette symetrie
   portait l'argument. Les engagements envers les independants ayant ete
   retires, le dispositif a disparu. Une section de six valeurs a existe
   puis a ete retiree. Voir tasks/todo.md.
   ========================================================================= */
:root {
  --o-paper:        #103246;
  --o-paper-2:      #17435B;
  --o-ink:          #EFEBD0;
  --o-ink-muted:    #CDCBA8;
  --o-ink-subtle:   #BABE9C;
  --o-accent:       #F0D8A4;
  --o-signal:       #CBA96A;
  /* Le trait de dessin technique. Creme translucide plutot qu'un bleu
     plus clair : sur un cyanotype, les traits sont en reserve, donc
     dans la couleur du papier et non dans celle de l'encre. */
  --o-draw:         rgba(239, 235, 208, .40);
  --o-draw-faint:   rgba(239, 235, 208, .26);
  /* La couleur du fond REELLEMENT RENDU, texture comprise. Elle sert aux
     reserves : un libelle qui interrompt un trait doit poser derriere lui
     la couleur que le lecteur voit, pas la couleur declaree. Avec
     --o-paper les etiquettes formaient des rectangles sombres, la texture
     eclaircissant le fond de #103246 a #224153. Mesure au canvas. */
  --o-paper-mean:   #224153;
  --o-line:         #234B62;
  --o-line-strong:  #35617A;

  /* Noto Serif Display, variable : Google sert les axes de graisse
     (100 a 900) et de largeur (62.5 a 100%) dans un seul fichier. On
     n'appelle ici que 300 a 600, les extremes n'ayant pas d'emploi.
     Contraste eleve : elle veut de grandes tailles et des graisses
     moderees. font-synthesis reste desactive plus bas, par principe. */
  --o-display-face: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --o-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --o-sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --o-display: clamp(32px, 4.0vw, 54px);
  --o-h2:      clamp(24px, 2.5vw, 33px);
  --o-h3:      20px;
  --o-lead:    clamp(17px, 1.35vw, 19px);
  --o-body:    17px;
  --o-small:   15px;
  --o-label:   12px;

  --o-track-label: .13em;
  --o-track-tight: -.01em;

  --o-s-2xs: 6px;  --o-s-xs: 12px;  --o-s-sm: 18px;  --o-s-md: 24px;
  --o-s-lg:  32px; --o-s-xl: 44px;  --o-s-2xl: 64px; --o-s-3xl: 84px;
  --o-s-4xl: 112px;

  --o-measure-wide:  1080px;
  --o-measure-prose: 60ch;
  --o-gutter: var(--o-s-md);
}


*, *::before, *::after { box-sizing: border-box; }

/* Aucune graisse ni italique fabriquee par le navigateur. Noto Serif
   Display porte de vraies graisses de 300 a 600 : si l'une manquait, mieux
   vaut un repli visible qu'un faux gras calcule. */
html { font-synthesis: none; }

/* Un seul filet de sable pleine largeur en tete de page. C'est le seul
   ornement de l'identite, et la seule surface qui ne soit ni le bleu du
   tirage ni la creme des traits. */
.flag { height: 3px; background: var(--o-signal); }

/* La texture du papier, en trois couches, toutes generees : aucun fichier
   a servir, aucune requete reseau, et la CSP autorise deja les data: en
   img-src. De la plus fine a la plus large :
     1. le grain de fibre, haute frequence, ce qui donne le toucher ;
     2. les fibres claires, une turbulence seuillee en marques rares et
        pales, comme les rayures d'un tirage insole sur tissu ;
     3. le filigrane, un trace de plan cadastral : voies traversantes,
        parcelles, noeuds de jonction et lignes de construction. Les voies
        sortent d'un bord et rentrent par l'autre au meme niveau, sinon le
        raccord de la tuile se verrait comme une grille ;
     4. le moutonnement, basse frequence sur une grande tuile, ce qui evite
        que la page paraisse d'une planeite d'ecran.
   Les tuiles portent toutes stitchTiles, sans quoi les raccords se voient.
   Les opacites ont ete reglees a la mesure, pas a l'oeil : une capture
   d'ecran reduite moyenne le grain et le fait paraitre absent. On rend
   chaque couche sur un canvas et on lit son ecart-type de luminance. Sous
   1.0 la couche est imperceptible, au-dela de 6 elle lit comme du bruit de
   compression. La cible est entre 2 et 4. */
body {
  margin: 0;
  background-color: var(--o-paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23a)' opacity='0.12'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='7' intercept='-5.3'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.88 0 0 0 0 0.86 0 0 0 0 0.72 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23b)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100'%3E%3Cg fill='none' stroke='%23EFEBD0' stroke-width='1' opacity='0.055'%3E%3Cline x1='0' y1='140' x2='1100' y2='140'/%3E%3Cline x1='0' y1='470' x2='1100' y2='470'/%3E%3Cline x1='0' y1='760' x2='1100' y2='760'/%3E%3Cline x1='0' y1='990' x2='1100' y2='990'/%3E%3Cline x1='210' y1='0' x2='210' y2='1100'/%3E%3Cline x1='560' y1='0' x2='560' y2='1100'/%3E%3Cline x1='880' y1='0' x2='880' y2='1100'/%3E%3Crect x='30' y='100' width='46' height='34'/%3E%3Crect x='84' y='100' width='62' height='34'/%3E%3Crect x='162' y='100' width='90' height='34'/%3E%3Crect x='322' y='100' width='90' height='34'/%3E%3Crect x='534' y='100' width='78' height='34'/%3E%3Crect x='768' y='86' width='78' height='48'/%3E%3Crect x='920' y='94' width='46' height='40'/%3E%3Crect x='982' y='86' width='90' height='48'/%3E%3Crect x='30' y='430' width='46' height='34'/%3E%3Crect x='88' y='430' width='46' height='34'/%3E%3Crect x='146' y='416' width='78' height='48'/%3E%3Crect x='236' y='416' width='62' height='48'/%3E%3Crect x='314' y='424' width='78' height='40'/%3E%3Crect x='408' y='424' width='46' height='40'/%3E%3Crect x='470' y='430' width='62' height='34'/%3E%3Crect x='544' y='430' width='90' height='34'/%3E%3Crect x='642' y='430' width='62' height='34'/%3E%3Crect x='810' y='430' width='78' height='34'/%3E%3Crect x='30' y='714' width='54' height='40'/%3E%3Crect x='92' y='714' width='62' height='40'/%3E%3Crect x='162' y='720' width='46' height='34'/%3E%3Crect x='290' y='706' width='90' height='48'/%3E%3Crect x='396' y='714' width='46' height='40'/%3E%3Crect x='458' y='706' width='90' height='48'/%3E%3Crect x='560' y='706' width='46' height='48'/%3E%3Crect x='618' y='714' width='46' height='40'/%3E%3Crect x='676' y='720' width='90' height='34'/%3E%3Crect x='774' y='714' width='78' height='40'/%3E%3Crect x='860' y='706' width='62' height='48'/%3E%3Crect x='938' y='720' width='90' height='34'/%3E%3Crect x='30' y='950' width='46' height='34'/%3E%3Crect x='166' y='950' width='46' height='34'/%3E%3Crect x='428' y='950' width='54' height='34'/%3E%3Crect x='498' y='944' width='62' height='40'/%3E%3Crect x='576' y='936' width='78' height='48'/%3E%3Crect x='724' y='944' width='46' height='40'/%3E%3Crect x='918' y='950' width='78' height='34'/%3E%3Crect x='1008' y='950' width='54' height='34'/%3E%3Crect x='218' y='296' width='58' height='70'/%3E%3Crect x='218' y='572' width='58' height='36'/%3E%3Crect x='218' y='680' width='58' height='44'/%3E%3Crect x='218' y='734' width='58' height='70'/%3E%3Crect x='218' y='964' width='46' height='36'/%3E%3Crect x='568' y='40' width='46' height='44'/%3E%3Crect x='568' y='352' width='74' height='44'/%3E%3Crect x='568' y='536' width='58' height='36'/%3E%3Crect x='568' y='582' width='46' height='70'/%3E%3Crect x='568' y='662' width='46' height='44'/%3E%3Crect x='568' y='724' width='58' height='58'/%3E%3Crect x='568' y='846' width='46' height='36'/%3E%3Crect x='568' y='892' width='58' height='36'/%3E%3Crect x='888' y='174' width='74' height='44'/%3E%3Crect x='888' y='336' width='58' height='70'/%3E%3Crect x='888' y='416' width='74' height='58'/%3E%3Crect x='888' y='572' width='58' height='36'/%3E%3Crect x='888' y='626' width='46' height='58'/%3E%3Crect x='888' y='694' width='74' height='36'/%3E%3Crect x='888' y='740' width='58' height='58'/%3E%3Crect x='888' y='878' width='46' height='70'/%3E%3Crect x='888' y='1004' width='74' height='70'/%3E%3Ccircle cx='210' cy='470' r='9'/%3E%3Ccircle cx='210' cy='990' r='9'/%3E%3Ccircle cx='560' cy='140' r='9'/%3E%3Ccircle cx='560' cy='760' r='9'/%3E%3Ccircle cx='880' cy='760' r='9'/%3E%3Cline x1='0' y1='0' x2='1100' y2='1100' stroke-dasharray='4 14'/%3E%3Cline x1='1100' y1='0' x2='0' y2='1100' stroke-dasharray='4 14'/%3E%3Cline x1='0' y1='620' x2='1100' y2='300' stroke-dasharray='3 16'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23c)' opacity='0.10'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat, repeat, repeat;
  color: var(--o-ink);
  font-family: var(--o-sans);
  font-size: var(--o-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, p, ul, ol, li, dl, dd) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--o-ink-subtle);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
a:hover { color: var(--o-accent); text-decoration-color: var(--o-accent); }
a:focus-visible {
  outline: 2px solid var(--o-accent);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--o-measure-wide);
  margin-inline: auto;
  padding-inline: var(--o-gutter);
}
.prose { max-width: var(--o-measure-prose); }

.label {
  font-family: var(--o-sans);
  font-size: var(--o-label);
  font-weight: 600;
  letter-spacing: var(--o-track-label);
  text-transform: uppercase;
  color: var(--o-ink-subtle);
}

.skip { position: absolute; left: -9999px; background: var(--o-paper-2); color: var(--o-ink); padding: var(--o-s-xs) var(--o-s-md); }
.skip:focus { left: var(--o-s-md); top: var(--o-s-md); z-index: 10; }

/* A l'impression, le grain ne rend rien de bon et consomme de l'encre. */
@media print {
  body { background-image: none; }
}

/* --- Le selecteur de langue ---------------------------------------------
   Deux liens, la langue courante marquee par aria-current plutot que par
   une classe : l'information est ainsi portee au lecteur d'ecran et pas
   seulement a l'oeil. */
.langues { display: flex; align-items: center; gap: 6px; }
.langues a {
  font-family: var(--o-sans);
  font-size: var(--o-label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--o-ink-subtle);
  padding: 5px 4px;
}
.langues a:hover { color: var(--o-accent); }
.langues a[aria-current] { color: var(--o-ink); }
.langues span { color: var(--o-line-strong); font-size: var(--o-label); }

/* --- Barre de tete ------------------------------------------------------ */
.masthead { border-bottom: 1px solid var(--o-line); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--o-s-md); padding-block: var(--o-s-md);
}
/* Le cartouche. Le logo est un cadre au trait, pas une image : le nom
   reste du texte, donc selectionnable, traduisible et lisible par un
   lecteur d'ecran, et il n'y a aucune requete en plus.
   text-indent compense l'interlettrage : letter-spacing ajoute aussi de
   l'espace APRES la derniere lettre, ce qui decale le mot vers la gauche
   dans son cadre. On le rattrape en decalant d'autant. */
.wordmark {
  display: inline-block;
  font-family: var(--o-display-face);
  font-size: 17px; font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  line-height: 1;
  text-decoration: none;
  color: var(--o-ink);
  border: 1px solid var(--o-draw);
  padding: 9px 15px 10px;
  transition: border-color .18s ease;
}
.wordmark:hover { color: var(--o-ink); border-color: var(--o-ink); }
.masthead__droite { display: flex; align-items: center; gap: var(--o-s-lg); }
.masthead nav { display: flex; gap: var(--o-s-lg); }
.masthead nav a {
  font-size: var(--o-label); font-weight: 500;
  letter-spacing: var(--o-track-label); text-transform: uppercase;
  text-decoration: none; color: var(--o-ink-muted);
  /* La cible faisait 19px de haut, sous les 24px minimum exiges pour un
     element interactif. Le remplissage vertical l'y porte sans rien
     changer a l'aspect du texte. */
  padding-block: 5px;
}
.masthead nav a:hover { color: var(--o-accent); }
/* Sous 620px la navigation passait a display:none, sans rien pour la
   remplacer : le visiteur mobile n'avait plus aucun moyen de naviguer sur
   une page de six sections. Elle passe desormais sous le sigle, sur toute
   la largeur, et se replie sur deux lignes si besoin.
   padding-block porte la cible tactile a 24px de haut, minimum requis. */
@media (max-width: 619px) {
  .masthead__inner { flex-wrap: wrap; }
  .masthead__droite { width: 100%; order: 2; flex-wrap: wrap; gap: var(--o-s-md); }
  .masthead nav {
    order: 2; width: 100%;
    flex-wrap: wrap; gap: 2px var(--o-s-md);
    margin-top: var(--o-s-xs);
    padding-top: var(--o-s-2xs);
    border-top: 1px solid var(--o-line);
  }
  .masthead nav a { padding-block: 5px; }
}

/* --- Ouverture ---------------------------------------------------------- */
.hero { padding-block: var(--o-s-4xl) var(--o-s-3xl); }
@media (max-width: 760px) { .hero { padding-block: var(--o-s-2xl); } }

.hero h1 {
  font-family: var(--o-display-face);
  font-size: var(--o-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 17ch;
}
.hero__lead {
  margin-top: var(--o-s-lg);
  font-size: var(--o-lead);
  line-height: 1.6;
  color: var(--o-ink-muted);
  max-width: 56ch;
}
.hero__lead + .hero__lead { margin-top: var(--o-s-md); }

/* --- Sections ----------------------------------------------------------- */
.section { padding-block: var(--o-s-3xl); border-top: 1px solid var(--o-line); }
@media (max-width: 760px) { .section { padding-block: var(--o-s-2xl); } }

.section h2 {
  font-family: var(--o-display-face);
  font-size: var(--o-h2);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin-top: var(--o-s-sm);
  max-width: 22ch;
}
.section > .wrap > .prose { margin-top: var(--o-s-lg); }
.section .prose p { color: var(--o-ink-muted); }
.section .prose p + p { margin-top: var(--o-s-md); }

/* --- Les deux metiers ---------------------------------------------------- */
.metiers { margin-top: var(--o-s-2xl); display: grid; gap: var(--o-s-2xl); }
@media (min-width: 860px) { .metiers { grid-template-columns: 1fr 1fr; gap: var(--o-s-3xl); } }

.metier {
  border-top: 2px solid var(--o-ink);
  padding-top: var(--o-s-md);
  display: flex; flex-direction: column;
}
.metier h3 {
  font-family: var(--o-serif); font-size: var(--o-h3); font-weight: 600;
  letter-spacing: var(--o-track-tight);
}
.metier p { margin-top: var(--o-s-2xs); color: var(--o-ink-muted); }
.metier dl { margin-top: auto; padding-top: var(--o-s-md); border-top: 1px solid var(--o-line); }
.metier dl div {
  display: flex; justify-content: space-between; gap: var(--o-s-md);
  padding-block: var(--o-s-2xs);
  border-bottom: 1px solid var(--o-line);
  font-size: var(--o-small);
}
.metier dt { color: var(--o-ink-subtle); }
.metier dd { color: var(--o-ink); text-align: right; }

/* --- Listes a filets ----------------------------------------------------
   Portent les situations declenchantes et les criteres de selection.
   La largeur est bridee : en pleine section de 1080px, la ligne montait a
   99 caracteres, tres au-dela des 65 a 75 confortables. 750px ramene a 72. */
.pledges { margin-top: var(--o-s-xl); max-width: 750px; }
.pledges li {
  padding-block: var(--o-s-sm);
  border-top: 1px solid var(--o-line);
  color: var(--o-ink-muted);
}
.pledges li:last-child { border-bottom: 1px solid var(--o-line); }
.pledges b { display: block; color: var(--o-ink); font-weight: 600; margin-bottom: 2px; }

/* --- Questions ----------------------------------------------------------
   Aucun repli interactif : la page ne charge aucun script et la CSP porte
   script-src 'none'. Tout est visible, c'est aussi le registre le plus sobre. */
.faq { margin-top: var(--o-s-xl); max-width: var(--o-measure-prose); }
.faq div { padding-block: var(--o-s-sm); border-top: 1px solid var(--o-line); }
.faq div:last-child { border-bottom: 1px solid var(--o-line); }
.faq dt {
  font-family: var(--o-serif); font-size: var(--o-body); font-weight: 600;
  letter-spacing: var(--o-track-tight);
}
.faq dd { margin-top: var(--o-s-2xs); color: var(--o-ink-muted); }

/* --- Deroulement, en plan technique --------------------------------------
   Chaque etape est un cadre dont le titre interrompt la bordure haute,
   comme sur un plan cote. Les lignes de liaison entre cadres sont des
   pseudo-elements : horizontales en grand format, verticales une fois la
   grille repliee. Les diagonales en pointille sont purement decoratives et
   vivent dans un SVG en arriere-plan, marque aria-hidden. */
.plan { position: relative; margin-top: var(--o-s-3xl); }

.plan__trace .trace { color: var(--o-draw-faint); }
.plan__trace {
  position: absolute; inset: -28px -12px; width: calc(100% + 24px);
  height: calc(100% + 56px); pointer-events: none;
}

.steps {
  position: relative;
  display: grid; gap: var(--o-s-2xl) var(--o-s-xl);
  max-width: 640px;
}
/* Trois paliers, tous poses a la mesure et non a l'oeil.
   En passant de 1 a 4 colonnes d'un coup a 880px, le texte des cadres
   tombait a 13 caracteres par ligne. Le palier intermediaire a deux
   colonnes a d'abord ete pose a 620px, ce qui EMPIRAIT les choses au
   passage : 51 caracteres en une colonne juste avant, 23 juste apres.
   Il est donc a 860px, la ou deux colonnes donnent enfin 36 caracteres.
   En une colonne la largeur est bridee : sans cela, a 859px, une ligne
   de cadre atteindrait 78 caracteres. */
@media (min-width: 860px)  { .steps { grid-template-columns: 1fr 1fr; max-width: none; } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step { position: relative; }

/* Le repere chiffre, pose hors cadre comme une cote de plan. */
.step__n {
  position: absolute; top: -11px; left: 0; z-index: 2;
  padding-right: 7px;
  background: var(--o-paper-mean);
  font-family: var(--o-serif); font-size: 13px; font-weight: 600;
  letter-spacing: .06em;
  color: var(--o-signal); font-variant-numeric: tabular-nums;
}

.step__frame {
  border: 1px solid var(--o-draw);
  padding: var(--o-s-lg) var(--o-s-md) var(--o-s-md);
  height: 100%;
}

/* Le titre chevauche la bordure haute : c'est la signature du plan. */
.step h3 {
  position: absolute; top: -10px; left: 34px; z-index: 2;
  padding-inline: 8px;
  background: var(--o-paper-mean);
  font-family: var(--o-display-face);
  font-size: 13px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--o-ink);
}
.step p { font-size: var(--o-small); color: var(--o-ink-muted); }

/* Les liaisons entre cadres, avec leur pointe de fleche. */
.step + .step::before,
.step + .step::after { content: ""; position: absolute; background: var(--o-draw); }

/* Une liaison ne se trace qu'entre deux cadres reellement voisins. En deux
   colonnes, le troisieme cadre ouvre une ligne : il n'a pas de voisin a sa
   gauche et ne doit donc rien recevoir. D'ou le ciblage sur les rangs
   pairs a ce palier. */
.step + .step::before,
.step + .step::after { display: none; }


@media (max-width: 859px) {
  .step + .step::before {
    display: block;
    top: calc(var(--o-s-2xl) * -1); left: 22px;
    width: 1px; height: var(--o-s-2xl);
  }
  .step + .step::after {
    display: block;
    top: -11px; left: 19px;
    width: 7px; height: 7px; background: none;
    border-right: 1px solid var(--o-draw);
    border-bottom: 1px solid var(--o-draw);
    transform: rotate(45deg);
  }
}
@media (min-width: 860px) and (max-width: 1079px) {
  .step:nth-child(even)::before {
    display: block;
    left: calc(var(--o-s-xl) * -1); top: 50%;
    width: var(--o-s-xl); height: 1px;
  }
  .step:nth-child(even)::after {
    display: block;
    left: -9px; top: calc(50% - 3px);
    width: 7px; height: 7px; background: none;
    border-right: 1px solid var(--o-draw);
    border-top: 1px solid var(--o-draw);
    transform: rotate(45deg);
  }
}
@media (min-width: 1080px) {
  .step + .step::before {
    display: block;
    left: calc(var(--o-s-xl) * -1); top: 50%;
    width: var(--o-s-xl); height: 1px;
  }
  .step + .step::after {
    display: block;
    left: -9px; top: calc(50% - 3px);
    width: 7px; height: 7px; background: none;
    border-right: 1px solid var(--o-draw);
    border-top: 1px solid var(--o-draw);
    transform: rotate(45deg);
  }
}

/* --- Contact ------------------------------------------------------------- */
.contact__grid {
  margin-top: var(--o-s-xl);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--o-s-xl);
}
.contact__block .label { display: block; margin-bottom: var(--o-s-2xs); }
.contact__block p { color: var(--o-ink-muted); }
.contact__mail {
  font-family: var(--o-serif);
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 400;
  letter-spacing: var(--o-track-tight);
  text-decoration-color: var(--o-accent);
}

/* La forme juridique accompagne le nom sans le concurrencer : un cran en
   dessous, legerement tracke pour rester lisible a petite taille.
   Elle n'apparait QUE dans le pied de page, ou les mentions legales la
   rendent necessaire. Ailleurs la marque s'appelle ONEO, tout court. */
.srl { font-size: max(11px, .8em); letter-spacing: .06em; }

/* --- Le formulaire ------------------------------------------------------
   Meme grammaire que le plan technique : le champ est un cadre au trait et
   son libelle interrompt la bordure haute. La reserve derriere le libelle
   reprend --o-paper-mean, sinon elle fait une tache sombre sur la texture.
   Aucun script : c'est un POST HTML classique, ramasse par Netlify. */
.form { margin-top: var(--o-s-xl); max-width: 620px; }
.form__row { position: relative; margin-bottom: var(--o-s-lg); }
.form__row label {
  position: absolute; top: -9px; left: 14px; z-index: 2;
  padding-inline: 8px;
  background: var(--o-paper-mean);
  font-family: var(--o-sans);
  font-size: var(--o-label); font-weight: 600;
  letter-spacing: var(--o-track-label); text-transform: uppercase;
  color: var(--o-ink-subtle);
}
.form input, .form select, .form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--o-draw);
  border-radius: 0;
  padding: var(--o-s-md) var(--o-s-sm) var(--o-s-xs);
  color: var(--o-ink);
  font-family: var(--o-sans);
  font-size: var(--o-body);
  line-height: 1.5;
  -webkit-appearance: none; appearance: none;
}
.form textarea { min-height: 148px; resize: vertical; }

/* Le champ de fichier. Son bouton natif se style par ::file-selector-button,
   le reste de la boite portant le nom du fichier choisi. Sans mise en forme,
   il ressort en gris systeme au milieu d'une page sombre. */
.form input[type="file"] {
  padding: var(--o-s-md) var(--o-s-sm) var(--o-s-xs);
  font-size: var(--o-small);
  color: var(--o-ink-muted);
  cursor: pointer;
}
.form input[type="file"]::file-selector-button {
  margin-right: var(--o-s-md);
  background: transparent;
  border: 1px solid var(--o-draw);
  border-radius: 0;
  padding: 5px 15px;
  color: var(--o-ink);
  font-family: var(--o-sans);
  font-size: var(--o-label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.form input[type="file"]::file-selector-button:hover {
  border-color: var(--o-ink);
}
.form__aide {
  margin-top: var(--o-s-2xs);
  font-size: var(--o-small);
  color: var(--o-ink-subtle);
}
.form select {
  /* Le chevron est dessine en fond : un select natif hors macOS n'affiche
     rien de lisible sur fond sombre une fois l'apparence retiree. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%23BABE9C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--o-s-sm) center;
  padding-right: var(--o-s-2xl);
}
.form select option { background: var(--o-paper); color: var(--o-ink); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--o-accent); outline-offset: 2px;
  border-color: var(--o-accent);
}
.form input::placeholder, .form textarea::placeholder { color: var(--o-ink-subtle); opacity: 1; }

.form__send {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--o-ink);
  border-radius: 0;
  padding: var(--o-s-xs) var(--o-s-xl);
  color: var(--o-ink);
  font-family: var(--o-display-face);
  font-size: var(--o-small); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.form__send:hover { background: var(--o-ink); color: var(--o-paper); }
.form__send:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 3px; }

/* Le piege a robots. Hors ecran plutot que display:none : certains robots
   ignorent les champs masques, et un lecteur d'ecran ne doit pas s'y
   arreter, d'ou aria-hidden et tabindex -1 dans le balisage. */
.form__trap { position: absolute; left: -9999px; }

.form__note { margin-top: var(--o-s-md); font-size: var(--o-small); color: var(--o-ink-subtle); }

/* --- Pied ---------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--o-line);
  padding-block: var(--o-s-xl) var(--o-s-2xl);
  font-size: var(--o-small);
}
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--o-s-lg) var(--o-s-xl); }
.foot dl div { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--o-s-xs); }
.foot dt {
  font-size: var(--o-label); font-weight: 600;
  letter-spacing: var(--o-track-label); text-transform: uppercase;
  color: var(--o-ink-subtle);
}
.foot dd { color: var(--o-ink-muted); font-variant-numeric: tabular-nums; }
.foot__rule { margin-top: var(--o-s-xl); padding-top: var(--o-s-md); border-top: 1px solid var(--o-line); color: var(--o-ink-subtle); }

/* La page de remerciement n'a qu'une section : son filet haut ferait
   doublon avec la bordure du bandeau. */
.section[data-premiere] { border-top: 0; }