/* =====================================================================
   OTERRANDI – design du site (maquettes 1920 : 1rem = 10px à 1920 px de large)
   Les blocs Elementor portent les classes ot-… ; tout le style est ici.
   ===================================================================== */

@font-face {
  font-family: 'Lateral Standard';
  src: url('../fonts/Lateral-StandardMedium.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TWK Ghost';
  src: url('../fonts/TWKGhost-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --rouge: #862b2a;
  --sauge: #d1e0d9;
  --clair: #e5efe7;
  --ghost: 'TWK Ghost', Georgia, 'Times New Roman', serif;
  --lateral: 'Lateral Standard', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --marge: 2.5rem;
  --trait: 1px;
  /* corps de texte : jamais sous 17 px (retour client « trop petit ») */
  --t-corps: max(17px, 2.4rem);
  --t-corps-l: max(18px, 3rem);
  --t-petit: max(14px, 2rem);
  --glass-blur: 1.6rem;
  --glass-veil: rgba(255, 255, 255, 0.14);
}

/* ---------- base ---------- */
html { font-size: clamp(5px, 0.5208333vw, 13.3px); -webkit-text-size-adjust: 100%; }
body.ot {
  margin: 0;
  background: var(--sauge);
  color: var(--rouge);
  font: 500 var(--t-corps)/1.15 var(--lateral);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
body.ot ::selection { background: var(--rouge); color: var(--sauge); }
body.ot .ot-rouge ::selection { background: var(--sauge); color: var(--rouge); }
body.ot img { max-width: 100%; height: auto; display: block; }
body.ot a { color: inherit; text-decoration: none; }

/* remise à zéro des blocs atomiques d'Elementor : la mise en page vient des classes ot- */
/* même poids que les classes ot- (0,2,1) et placé avant elles : elles priment ; bat .elementor .e-flexbox-base */
body.ot .e-flexbox-base, body.ot .e-div-block-base { display: block; padding: 0; gap: 0; min-width: 0; width: auto; }
/* Elementor réserve .e-con::before à son calque de fond (hauteur et largeur forcées à 100 %) :
   rendu libre pour nos traits et étoiles, chaque règle ot- pose ensuite sa propre géométrie */
body.ot .e-con::before { height: auto; width: auto; }
body.ot .e-heading-base, body.ot .e-paragraph-base { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: 0; }
body.ot .e-button-base { all: unset; box-sizing: border-box; cursor: pointer; }
body.ot .e-image-base { all: unset; display: block; }
body.ot .elementor-widget-container, .ot [data-elementor-type="wp-page"] { display: contents; }
body.ot main.ot-page, body.ot .ot-section { position: relative; width: 100%; }
/* sections de premier niveau : rien ne dépasse en largeur (zoom d'apparition des vitres) */
body.ot .elementor > .e-con, body.ot .ot-pied, body.ot .ot-fiche { overflow-x: clip; }
/* images et vitres : ni sélectionnables ni glissables (hors éditeur Elementor) */
body.ot:not(.elementor-editor-active) :is(img, svg, picture, video, .ot-vitre, .glass, .glass *) {
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ---------- typographie ---------- */
body.ot .ot-ghost { font-family: var(--ghost); font-weight: 400; }
body.ot .ot-caps { font-family: var(--lateral); text-transform: uppercase; }
body.ot .ot-titre-xl { font: 400 14.4rem/1 var(--ghost); letter-spacing: -0.01em; }
body.ot .ot-titre-l { font: 400 9.6rem/1 var(--ghost); }
body.ot .ot-titre-m { font: 400 9rem/0.95 var(--ghost); }
body.ot .ot-texte { font-size: var(--t-corps); line-height: 1.2; }
body.ot .ot-texte-l { font-size: var(--t-corps-l); line-height: 1.15; }
body.ot .ot-lien {
  display: inline-flex; align-items: center; gap: 1.6rem;
  font: 500 3rem/1 var(--lateral); text-transform: uppercase;
  border-bottom: var(--trait) solid currentColor; padding-bottom: .4rem;
  transition: gap .3s;
}
body.ot .ot-lien::after {
  content: ""; width: 4.6rem; height: 1.4rem; margin-bottom: -.4rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 14'%3E%3Cpath d='M0 7h44M38 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 14'%3E%3Cpath d='M0 7h44M38 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.ot .ot-lien:hover { gap: 2.4rem; }

/* fonds */
body.ot .ot-rouge { background: var(--rouge); color: var(--sauge); }
body.ot .ot-sauge { background: var(--sauge); color: var(--rouge); }

/* étoile de la marque : symbole exact du client (#etoile de la landing, viewBox 6276 × 6606,
   branches fines = 17,5 % de la largeur, prolongées au-delà des arcs) */
:root {
  --masque-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3138 -3303 6276 6606'%3E%3Cpath d='M-550.5 -3303 H550.5 V-2752.51 A2202.1 2202.1 0 0 0 2752.6 -550.41 H3138 V550.41 H2752.6 A2202.1 2202.1 0 0 0 550.5 2752.51 V3303 H-550.5 V2752.51 A2202.1 2202.1 0 0 0 -2752.6 550.41 H-3138 V-550.41 H-2752.6 A2202.1 2202.1 0 0 0 -550.5 -2752.51 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  --ratio-etoile: 6276 / 6606;
}
body.ot .ot-etoile, body.ot .ot-etoile-masque, body.ot .ot-pastille::after, body.ot .ot-ref__zone::before {
  -webkit-mask: var(--masque-etoile);
          mask: var(--masque-etoile);
}

/* apparition au défilement, comme la landing (le script ajoute .in et décale les voisins par --d) */
/* transition seulement à l'apparition (.in) : quand le script masque un élément déjà affiché (ouverture de
   l'Accueil), le masquage est instantané — sinon il attendait le même retard et l'élément restait visible */
html.js body.ot .ot-apparait { opacity: 0; transform: translate3d(0, 3rem, 0); }
html.js body.ot .ot-apparait.in { opacity: 1; transform: none; transition: opacity .9s ease var(--d, 0s), transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
/* Accueil : sous-titre et bouton en fondu seul (pas de montée) */
html.js body.ot :is(.ot-hero__texte, .ot-hero__bouton).ot-apparait { transform: none; }
body.elementor-editor-active .ot-apparait { opacity: 1 !important; transform: none !important; }

/* voile de chargement : fond pâle qui s'efface une fois polices et photo d'ouverture prêtes */
.ot-voile { position: fixed; inset: 0; z-index: 100; background: var(--sauge); pointer-events: none; transition: opacity .9s ease; }
.ot-voile.out { opacity: 0; }
body.elementor-editor-active .ot-voile { display: none; }

/* =====================================================================
   EN-TÊTE
   ===================================================================== */
.ot-entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 11rem; padding: 0 var(--marge);
  color: var(--rouge);
}
.ot-entete.masque { transform: translateY(-100%); }
/* en-tête qui réapparaît en remontant : barre deux fois moins haute, logo et liens centrés verticalement */
.ot-entete.fond { background: var(--sauge); height: max(48px, 5.5rem); }
/* fond et couleur du texte changent toujours ensemble, sans fondu : avec un fondu du fond, le texte passait
   un instant sur un fond de sa couleur (menu et logo invisibles en remontant, ou en passant d'une section
   rouge à une section sauge) */
.ot-entete { transition: transform .5s cubic-bezier(.3,.7,.2,1), height .4s cubic-bezier(.3,.7,.2,1); }
/* exception (29/10) : retour en haut de page, le fond disparaît en fondu (.4 s) au lieu d'un coup — la règle
   ne joue que dans ce sens (l'apparition du fond reste instantanée) */
.ot-entete:not(.fond) { transition: transform .5s cubic-bezier(.3,.7,.2,1), height .4s cubic-bezier(.3,.7,.2,1), background-color .4s ease; }
.ot-entete__logo { display: block; width: 28.8rem; line-height: 0; }
.ot-entete__logo svg { width: 100%; height: auto; fill: currentColor; }
/* le SVG exporté porte fill="#872a2a" sur ses tracés : forcé à la couleur du texte (sauge sur fond rouge) */
.ot-entete__logo svg [fill], .ot-pied__logo svg [fill] { fill: currentColor; }
.ot-entete__nav { display: flex; align-items: center; gap: 0; }
.ot-entete__menu { display: flex; margin: 0; padding: 0; list-style: none; }
.ot-entete__menu a {
  display: block; padding: .9rem 0; margin-left: 5.4rem;
  font: 500 max(14px, 1.9rem)/1 var(--lateral); text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 var(--trait) no-repeat;
  transition: background-size .4s;
}
.ot-entete__menu a:hover, .ot-entete__menu .current-menu-item > a,
.ot-entete__menu .current-menu-ancestor > a, .ot-entete__menu .ot-actif > a { background-size: 100% var(--trait); }
.ot-langues { display: flex; gap: .7rem; margin-left: 4rem; font: 500 max(12px, 1.5rem)/1 var(--lateral); text-transform: uppercase; }
.ot-langues a { opacity: .45; transition: opacity .3s; }
.ot-langues a.actif, .ot-langues a:hover { opacity: 1; }
.ot-burger { display: none; }

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */
.ot-pied { position: relative; background: var(--sauge); color: var(--rouge); padding: 7rem var(--marge) 3.2rem; text-align: center; }
.ot-pied__menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem 4.6rem; margin: 0; padding: 0; list-style: none; font: 500 max(13px, 2.2rem)/1 var(--lateral); text-transform: uppercase; }
.ot-pied__menu a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 var(--trait) no-repeat; transition: background-size .4s; }
.ot-pied__menu a:hover { background-size: 100% var(--trait); }
/* mentions (29/10) : typo moitié du menu, interligne 100 %, centrées (la règle des 70 % sur les p les
   décalait à gauche : marge auto pour recentrer la boîte) */
.ot-pied__mentions { margin-top: 7rem; font: 500 1.65rem/1 var(--lateral); }
body.ot .ot-pied__mentions p { margin: 0 auto; }
.ot-pied__logo { display: block; width: 100%; margin-top: 11rem; line-height: 0; }
.ot-pied__logo svg { width: 100%; height: auto; fill: currentColor; }

/* =====================================================================
   VITRE (photo nette dans les étoiles, floutée autour) – construite par le script
   ===================================================================== */
body.ot .ot-vitre { position: relative; overflow: hidden; height: 87.3rem; background: var(--clair); }
body.ot .ot-vitre > .e-image-base, body.ot .ot-vitre > img { position: absolute; inset: 0; width: 100%; height: 100%; }
body.ot .ot-vitre img { width: 100%; height: 100%; object-fit: cover; }
body.ot .ot-vitre.prete > .e-image-base, body.ot .ot-vitre.prete > img { visibility: hidden; }
/* Vitre : la couche floutée est découpée par un MASQUE CSS (path client tel quel), pas un clip-path SVG
   que Chrome repeint à chaque image. RÈGLE : les étoiles nettes touchent TOUJOURS le haut et le bas du
   bandeau. Le masque est donc recadré verticalement sur les pointes des branches (y 85,1 → 510,2 du
   fichier client), en « cover » centré : bandeau moins large que le motif (2,49:1) → la hauteur commande,
   les pointes touchent pile le haut et le bas ; plus large → la largeur commande, les branches dépassent
   en haut et en bas (elles touchent donc aussi). Pas de répétition (les demi-étoiles des bords du fichier
   ne se raccordent pas) ni d'aplat sur les côtés (il coupait les demi-étoiles). Vitres hors écran non rendues
   (content-visibility) ; une seule couche GPU par photo (will-change sur l'image seule). */
:root {
  --masque-vitre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1058.3' height='425.1' viewBox='0 85.1 1058.3 425.1'%3E%3Cpath d='M0,0h1058.3v252.3c-52.4-20.8-89.8-72.2-89.8-131.8v-35.4h-70.9v35.4c0,78-63.8,141.7-141.7,141.7h-49.6c-78,0-141.7-63.8-141.7-141.7v-35.4h-70.9v35.4c0,78-63.8,141.7-141.7,141.7h-49.6c-78,0-141.7-63.8-141.7-141.7v-35.4h-70.9v35.4C89.8,180.1,52.4,231.4,0,252.3V0H0ZM1058.3,343v252.3H0v-252.3c52.4,20.8,89.8,72.2,89.8,131.8v35.4h70.9v-35.4c0-78,63.8-141.7,141.7-141.7h49.6c77.9,0,141.7,63.8,141.7,141.7v35.4h70.9v-35.4c0-78,63.8-141.7,141.7-141.7h49.6c77.9,0,141.7,63.8,141.7,141.7v35.4h70.9v-35.4c0-59.6,37.3-111,89.8-131.8h0Z'/%3E%3C/svg%3E");
}
/* pas de content-visibility sur les vitres : hors écran, elles sortaient du rendu et devaient être
   redessinées (photos redécodées) à chaque retour à l'écran — la saccade à l'arrivée d'une zone floutée */
body.ot .ot-vitre { contain: layout paint; }
.glass { position: absolute; inset: 0; overflow: hidden; }
.glass__layer { position: absolute; inset: 0; overflow: hidden; }
.glass__layer--blur { z-index: 2; -webkit-mask: var(--masque-vitre) center / cover no-repeat; mask: var(--masque-vitre) center / cover no-repeat; }
.glass__layer--sharp { z-index: 1; }
/* will-change dès le départ : sinon le navigateur crée la couche au lancement du zoom d'apparition,
   pile quand la vitre arrive à l'écran (saccade) */
.glass__cadre { position: absolute; inset: 0; transform: scale(1.072); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.glass.in .glass__cadre { transform: none; }
.glass__img { position: absolute; left: 0; top: -12%; width: 100% !important; height: 124% !important; max-width: none !important; object-fit: cover; will-change: transform; transform: translate3d(0, 0, 0); }
.glass__layer--blur .glass__img { left: -3%; width: 106% !important; top: -14%; height: 128% !important; filter: blur(var(--glass-blur)); }
.glass__layer--blur .glass__img--pre { filter: none; }   /* photo déjà floutée et voilée (img/flou, flou_vitres.py) */
.glass__layer--blur.pre::after { content: none; }
.glass__layer--blur::after { content: ""; position: absolute; inset: 0; background: var(--glass-veil); pointer-events: none; }
.ot-masques { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =====================================================================
   ACCUEIL
   ===================================================================== */
/* -- ouverture -- */
body.ot .ot-hero { position: relative; min-height: max(100vh, 108rem); display: flex; flex-direction: column; align-items: center; color: var(--rouge); overflow: hidden; }
body.ot .ot-hero > .ot-vitre { position: absolute; inset: 0; height: auto; z-index: 0; }
body.ot .ot-hero__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 22rem; }
body.ot .ot-hero__titre { font: 400 18rem/0.94 var(--ghost); letter-spacing: -0.015em; max-width: 13ch; }
/* tous les h1, à l'ouverture : révélation masquée ligne à ligne — chaque ligne monte depuis le bas de sa
   fenêtre (découpe aux <br> par site.js). Fenêtre agrandie de .2em en haut et en bas (marges négatives) :
   accents et jambages jamais rognés. Titre en colonne flex : ces marges négatives ne fusionnent pas entre
   elles (en bloc, elles écartaient les lignes de .2em) → interlignage identique au titre non découpé.
   Retrait de première ligne (étoile des en-têtes) : seulement sur la première fenêtre. */
body.ot h1.ot-decoupe { display: flex !important; flex-direction: column; }
body.ot h1.ot-decoupe .ot-ligne-mask { display: block; overflow: hidden; padding: .2em 0; margin: -.2em 0; }
body.ot h1.ot-decoupe .ot-ligne-mask + .ot-ligne-mask { text-indent: 0; }
body.ot h1.ot-decoupe .ot-ligne { display: block; }
/* transition sur la montée seulement : la mise en place en bas de la fenêtre est instantanée (avec la
   transition dessus, la ligne descendait avec retard et n'était pas encore en bas au départ de la montée) */
/* départ : la ligne entière sous la fenêtre (hauteur de ligne + .2em de marge basse de la fenêtre + .3em
   pour les accents et le haut des lettres qui dépassent de la ligne) → rien ne dépasse avant la montée */
html.js body.ot h1.ot-decoupe .ot-ligne.ot-apparait { opacity: 1; transform: translate3d(0, calc(100% + .5em), 0); transition: none; }
html.js body.ot h1.ot-decoupe .ot-ligne.ot-apparait.in { transform: none;
  transition: transform 1.2s cubic-bezier(.2,.75,.15,1) var(--d, 0s); }
/* h1 caché jusqu'à sa découpe (pas de clignotement) ; garde-fou : visible après 3 s quoi qu'il arrive */
html.js body.ot:not(.elementor-editor-active) h1:not(.ot-h1-pret) { visibility: hidden; animation: ot-h1-garde 0s 3s forwards; }
@keyframes ot-h1-garde { to { visibility: visible; } }
body.ot .ot-hero__texte { max-width: 116rem; margin-top: 6rem; font: 500 max(17px, 3rem)/0.9 var(--lateral); }
body.ot .ot-hero__bouton { margin-top: 3.4rem; font: 500 max(17px, 3rem)/1 var(--lateral); border-bottom: var(--trait) solid currentColor; padding-bottom: .3rem; }
/* grille 1fr / auto / 1fr (comme la landing) : STRUCTURATION exactement au centre, quelles que soient
   les largeurs de CONSEIL et INVESTISSEMENT */
body.ot .ot-hero__piliers { position: absolute; z-index: 1; left: var(--marge); right: var(--marge); bottom: 1.6rem; display: grid; grid-template-columns: 1fr auto 1fr; }
body.ot .ot-hero__piliers > :first-child { justify-self: start; }
body.ot .ot-hero__piliers > :nth-child(2) { justify-self: center; }
body.ot .ot-hero__piliers > :last-child { justify-self: end; }
body.ot .ot-hero__pilier { font: 500 4.4rem/1 var(--lateral); text-transform: uppercase; }

/* -- cinq rôles -- */
body.ot .ot-roles { padding: 18rem var(--marge) 20rem; display: flex; flex-direction: column; }
body.ot .ot-roles__titre { max-width: 150rem; font-size: 11rem; line-height: 1; }
body.ot .ot-roles__grille { display: grid; grid-template-columns: 1fr 65.8rem 1fr; column-gap: 5rem; margin-top: 16rem; align-items: stretch; }
body.ot .ot-roles__col { display: flex; flex-direction: column; justify-content: space-between; gap: 6rem; }
body.ot .ot-roles__col--droite { text-align: right; }
body.ot .ot-role { display: flex; flex-direction: column; padding-bottom: 5rem; border-bottom: var(--trait) solid currentColor; }
body.ot .ot-role__titre { font: 500 4.8rem/0.96 var(--lateral); text-transform: uppercase; }
body.ot .ot-role__texte { margin-top: 2.6rem; max-width: 42rem; font: 500 max(15px, 2rem)/1.1 var(--lateral); }
/* croix des « cinq modes » : la photo reste fixe (cadrée sur le personnage), seule la fenêtre en étoile
   grandit au défilement — taille et position du masque posées par le script */
body.ot .ot-roles__visuel { align-self: center; width: 65.8rem; aspect-ratio: 658 / 692; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
body.ot .ot-roles__visuel img { object-position: 49.5% 80%; }
body.ot .ot-roles__visuel img { width: 100%; height: 100%; object-fit: cover; }

/* -- trois zones -- */
body.ot .ot-zones { display: grid; grid-template-columns: 52rem 1fr 1fr 1fr; align-items: center; column-gap: 3rem; padding: 11rem var(--marge); }
body.ot .ot-zones__titre { font: 400 9rem/0.95 var(--ghost); text-align: center; color: var(--rouge); }
body.ot .ot-zone { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio-etoile); color: var(--sauge); }
/* étoile en pseudo-élément : elle tourne à l'apparition (−45° → 0, comme la landing), pas le texte */
body.ot .ot-zone.ot-etoile { -webkit-mask: none; mask: none; background: none; }
body.ot .ot-zone::before { content: ""; position: absolute; inset: 0; background: var(--rouge); -webkit-mask: var(--masque-etoile); mask: var(--masque-etoile); }
html.js body.ot .ot-zone.ot-apparait { transform: none; transition-duration: 1.1s, 1.1s; }
html.js body.ot .ot-zone.ot-apparait::before { transform: rotate(-45deg); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
html.js body.ot .ot-zone.ot-apparait.in::before { transform: none; }
body.ot .ot-zone__nom { position: relative; }
body.ot .ot-zone__nom { font: 500 3.6rem/1 var(--lateral); text-transform: uppercase; text-align: center; }

/* -- chiffres -- */
body.ot .ot-chiffres { padding: 17rem var(--marge) 20rem; }
body.ot .ot-chiffres__grille { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18rem; row-gap: 11rem; }
body.ot .ot-chiffre { position: relative; display: flex; flex-direction: column; padding: 4rem 6rem 3rem 8.5rem; border-left: var(--trait) solid currentColor; }
body.ot .ot-chiffre:nth-child(3n) { border-right: var(--trait) solid currentColor; }
body.ot .ot-chiffre::before { content: ""; position: absolute; top: -5.5rem; left: 12rem; width: 38rem; border-top: var(--trait) solid currentColor; }
body.ot .ot-chiffres__grille > .ot-chiffre:nth-child(-n+3)::before { display: none; }
body.ot .ot-chiffre__nombre { font: 500 20rem/0.8 var(--lateral); letter-spacing: -0.02em; }
body.ot .ot-chiffre__unite { font: 500 8.6rem/0.9 var(--lateral); }
body.ot .ot-chiffre__ligne { display: flex; align-items: baseline; }
body.ot .ot-chiffre__libelle { margin-top: 1.6rem; font: 500 3.6rem/1 var(--lateral); text-transform: uppercase; }

/* -- exemples de prestations (cartes) -- */
body.ot .ot-exemples { padding: 18rem 0 14rem; }
body.ot .ot-exemples__titre { padding: 0 var(--marge); max-width: 140rem; }
body.ot .ot-defile { display: flex; gap: 2.3rem; margin-top: 11rem; padding: 0 var(--marge); overflow-x: auto; scrollbar-width: none; cursor: grab; }
body.ot .ot-defile::-webkit-scrollbar { display: none; }
body.ot .ot-defile.glisse { cursor: grabbing; }
body.ot .ot-defile.glisse * { pointer-events: none; }
body.ot .ot-carte { flex: 0 0 56.4rem; display: flex; flex-direction: column; background: var(--rouge); color: var(--sauge); }
body.ot .ot-carte__visuel { position: relative; height: 45.1rem; overflow: hidden; }
body.ot .ot-carte__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
body.ot .ot-carte:hover .ot-carte__visuel img { transform: scale(1.04); }
body.ot .ot-pastille { position: absolute; top: 1rem; left: 1.6rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 14rem; height: auto; aspect-ratio: var(--ratio-etoile); }
body.ot .ot-pastille::after { content: ""; position: absolute; inset: 0; background: var(--rouge); }
/* top .1em : capitales recentrées dans l'étoile (la police les pose ~2 px trop haut à 1920) */
body.ot .ot-pastille__nom { position: relative; top: .1em; z-index: 1; font: 500 max(11px, 2rem)/1 var(--lateral); text-transform: uppercase; color: var(--sauge); }
body.ot .ot-carte__corps { display: flex; flex-direction: column; padding: 3rem 2.7rem 4rem; min-height: 36rem; }
body.ot .ot-carte__surtitre { font: 500 max(12px, 2rem)/1.1 var(--lateral); text-transform: uppercase; }
body.ot .ot-carte__titre { margin-top: 4rem; font: 400 4.8rem/1 var(--ghost); }
body.ot .ot-carte__texte { margin-top: 2.2rem; font: 400 max(15px, 2rem)/1.2 var(--ghost); }
body.ot .ot-exemples__lien { margin: 7rem var(--marge) 0; align-self: flex-start; }
body.ot .ot-exemples { display: flex; flex-direction: column; }

/* -- bureaux -- */
body.ot .ot-bureaux { padding: 17rem var(--marge) 24rem; text-align: center; }
body.ot .ot-bureaux__titre { margin: 0 auto; }
body.ot .ot-bureaux__grille { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18rem; }
body.ot .ot-bureau { display: flex; flex-direction: column; align-items: center; padding: 2rem 0; border-left: var(--trait) solid currentColor; }
body.ot .ot-bureau:last-child { border-right: var(--trait) solid currentColor; }
body.ot .ot-bureau__ville { font: 500 18rem/0.85 var(--lateral); }
body.ot .ot-bureau__role { margin-top: 2.6rem; font: 500 4.8rem/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-bureau__depuis { margin-top: 1.4rem; font: 500 max(16px, 3rem)/1 var(--lateral); }

/* -- ce qui nous distingue -- */
body.ot .ot-distingue { padding: 18rem var(--marge) 16rem; }
body.ot .ot-valeurs { margin-top: 13rem; border-top: var(--trait) solid currentColor; }
body.ot .ot-valeur { position: relative; display: grid; grid-template-columns: 9.5rem 1fr 65rem 7rem; align-items: start; padding: 5rem 0 6rem; border-bottom: var(--trait) solid currentColor; }
body.ot .ot-valeur__num { font: 500 4rem/1 var(--lateral); }
body.ot .ot-valeur__nom { font: 500 10rem/0.8 var(--lateral); text-transform: uppercase; }
body.ot .ot-valeur__texte { font: 500 max(16px, 3rem)/1 var(--lateral); max-width: 64rem; }
body.ot .ot-valeur::after {
  content: ""; justify-self: end; width: 4.6rem; height: 4.6rem; margin-top: .6rem;
  background: linear-gradient(currentColor, currentColor) center / 100% var(--trait) no-repeat,
              linear-gradient(currentColor, currentColor) center / var(--trait) 100% no-repeat;
  transition: transform .5s;
}
body.ot .ot-valeur:hover::after { transform: rotate(90deg); }

/* =====================================================================
   PAGES INTÉRIEURES : haut de page à vitre, petite étoile, signe +
   ===================================================================== */
body.ot .ot-vitre--courte { height: 75rem; }
body.ot .ot-tete { position: relative; min-height: 87.3rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--marge) 26rem; overflow: hidden; }
body.ot .ot-tete > .ot-vitre { position: absolute; inset: 0; height: auto; z-index: 0; }
body.ot .ot-tete__contenu { position: relative; z-index: 1; }
/* titres d'en-tête tous composés comme celui de Notre histoire : 14,4rem, interlignage 0,9, étoile en
   retrait de la première ligne, lignes suivantes revenues à la marge ; filet dessous (sauf Histoire) */
body.ot .ot-tete__titre { display: block; position: relative; padding-bottom: 2.4rem; border-bottom: var(--trait) solid currentColor; font: 400 14.4rem/0.9 var(--ghost); text-indent: 11rem; }
body.ot .ot-tete__titre::before, body.ot .ot-etoile-titre::after {
  content: ""; flex: 0 0 auto; width: 6.2rem; height: 6.2rem; background: currentColor;
  -webkit-mask: var(--masque-etoile); mask: var(--masque-etoile);
}
body.ot .ot-tete__titre::before { position: absolute; left: 0; top: .9rem; width: 9rem; height: 9.5rem; }
body.ot .ot-tete__texte { margin-top: 2.6rem; max-width: 172rem; font: 500 4.8rem/0.96 var(--lateral); }

/* onglets des trois pages Services */
body.ot .ot-onglets { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--sauge); color: var(--rouge); }
body.ot .ot-onglet { position: relative; display: grid; grid-template-columns: 6.8rem 1fr; align-content: start; min-height: 20.7rem; padding: 3.4rem 2.6rem 3rem; transition: background-color .4s, color .4s; }
body.ot .ot-onglet + .ot-onglet::before { content: ""; position: absolute; left: 0; top: 4rem; bottom: 4rem; border-left: var(--trait) solid currentColor; }
body.ot .ot-onglet--actif + .ot-onglet::before, body.ot .ot-onglet--actif::before { display: none; }
body.ot .ot-onglet--actif, body.ot .ot-onglet:hover { background: var(--rouge); color: var(--sauge); }
body.ot .ot-onglet:hover + .ot-onglet::before, body.ot .ot-onglet:hover::before { display: none; }
body.ot .ot-onglet__num { font: 500 4rem/1 var(--lateral); }
body.ot .ot-onglet__nom { font: 500 3.6rem/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-onglet__legende { grid-column: 2; margin-top: .4rem; font: 400 max(13px, 2rem)/1.1 var(--ghost); }
body.ot .ot-onglets--colle { position: sticky; top: 0; z-index: 40; }

/* introduction rouge */
body.ot .ot-intro { padding: 16rem var(--marge) 19rem; }
body.ot .ot-intro__titre { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; }
body.ot .ot-etoile-titre::after { width: 4.8rem; height: 4.8rem; margin-top: 2rem; }
body.ot .ot-intro__texte { margin-top: 4.6rem; max-width: 120rem; font: 500 var(--t-corps-l)/1.12 var(--lateral); }

/* services en volets */
body.ot .ot-services { padding: 18rem var(--marge) 17rem; }
body.ot .ot-volets { margin-top: 9rem; }
body.ot .ot-volet { border-bottom: var(--trait) solid currentColor; }
body.ot .ot-volet__titre {
  position: relative; display: block; padding: 4rem 12rem 2.6rem 0;
  font: 500 3.6rem/1.05 var(--lateral); text-transform: uppercase;
}
body.ot .ot-volet__titre::after {
  content: ""; position: absolute; right: 2.6rem; top: 50%; width: 4.6rem; height: 4.6rem; margin-top: -2rem;
  background: linear-gradient(currentColor, currentColor) center / 100% var(--trait) no-repeat,
              linear-gradient(currentColor, currentColor) center / var(--trait) 100% no-repeat;
  transition: transform .5s cubic-bezier(.3,.7,.2,1);
}
body.ot .ot-volet--ouvrable .ot-volet__titre { cursor: pointer; }
body.ot .ot-volet.ouvert .ot-volet__titre::after { transform: rotate(45deg); }
body.ot .ot-volet__contenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.3,.7,.2,1); }
body.ot .ot-volet__contenu > * { overflow: hidden; }
body.ot .ot-volet.ouvert .ot-volet__contenu, body.elementor-editor-active .ot-volet__contenu { grid-template-rows: 1fr; }
body.ot .ot-volet__corps { display: flex; flex-direction: column; gap: 5.2rem; padding: 0; }
body.ot .ot-volet.ouvert .ot-volet__corps { padding: 3.4rem 0 5.6rem; }
body.ot .ot-puce { position: relative; padding-left: 9.3rem; min-height: 4.6rem; display: flex; align-items: center; font: 500 var(--t-corps-l)/1.1 var(--lateral); }
body.ot .ot-puce::before { content: ""; position: absolute; left: 0; top: 50%; width: 4.6rem; height: 4.6rem; margin-top: -2.3rem; background: currentColor; -webkit-mask: var(--masque-etoile); mask: var(--masque-etoile); }
body.ot .ot-volet__texte { max-width: 154rem; font: 500 var(--t-corps-l)/1.12 var(--lateral); }

/* valeur ajoutée (citation entre deux filets) */
body.ot .ot-ajoutee { padding: 17rem var(--marge) 20rem; text-align: center; }
body.ot .ot-ajoutee__titre { max-width: 130rem; margin: 0 auto; }
body.ot .ot-ajoutee__cadre { max-width: 142.5rem; margin: 8rem auto 0; padding: 2rem 8rem; border-left: var(--trait) solid currentColor; border-right: var(--trait) solid currentColor; display: flex; flex-direction: column; gap: 3rem; }
body.ot .ot-ajoutee__texte { font: 500 4.8rem/0.96 var(--lateral); }
body.ot .ot-ajoutee__texte--long { font-size: max(18px, 3.6rem); line-height: 1.05; }

/* références clefs */
body.ot .ot-clefs { padding: 18rem var(--marge) 14rem; display: flex; flex-direction: column; }
body.ot .ot-clefs__liste { margin-top: 13rem; border-top: var(--trait) solid currentColor; }
body.ot .ot-clef { position: relative; display: grid; grid-template-columns: 9.5rem 1fr 50rem 7rem; align-items: start; column-gap: 2rem; padding: 4.5rem 0 6rem; border-bottom: var(--trait) solid currentColor; }
body.ot .ot-clef__num { font: 500 4rem/1 var(--lateral); padding-top: .4rem; }
body.ot .ot-clef__nom { font: 500 7.2rem/0.97 var(--lateral); text-transform: uppercase; max-width: 112rem; }
body.ot .ot-clef__client { display: flex; flex-direction: column; gap: .8rem; padding-top: .4rem; }
body.ot .ot-clef__qui { font: 500 3.6rem/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-clef__quoi { font: 400 3.2rem/1.05 var(--lateral); text-transform: uppercase; opacity: .92; }
body.ot .ot-clef__quoi--texte { text-transform: none; font-size: var(--t-corps); line-height: 1.2; }
body.ot .ot-clef::after {
  content: ""; justify-self: end; width: 4.6rem; height: 4.6rem; margin-top: .4rem;
  background: linear-gradient(currentColor, currentColor) center / 100% var(--trait) no-repeat,
              linear-gradient(currentColor, currentColor) center / var(--trait) 100% no-repeat;
}
body.ot .ot-clefs__lien { margin-top: 6rem; align-self: flex-start; }
/* chaque référence clef mène à sa fiche : la croix tourne au survol */
body.ot a.ot-clef { color: inherit; text-decoration: none; }
body.ot a.ot-clef::after { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
body.ot a.ot-clef:hover::after { transform: rotate(45deg); }

@media (max-width: 820px) {
  body.ot .ot-vitre--courte { height: 36rem; }
  body.ot .ot-tete { min-height: 0; padding: 14rem var(--marge) 6rem; }
  body.ot .ot-tete__titre { font-size: 4.2rem; text-indent: 4.4rem; padding-bottom: 1.4rem; }
  body.ot .ot-insecable { white-space: nowrap; }   /* « travaillons-nous ? » jamais coupé au trait d'union */
  body.ot .ot-tete__titre::before { width: 3.4rem; height: 3.6rem; top: .4rem; }
  body.ot .ot-tete__texte { font-size: 2rem; line-height: 1.1; }
  body.ot .ot-onglets { grid-template-columns: 1fr; }
  body.ot .ot-onglet { min-height: 0; padding: 1.8rem var(--marge); grid-template-columns: 4rem 1fr; }
  body.ot .ot-onglet + .ot-onglet::before { left: var(--marge); right: var(--marge); top: 0; bottom: auto; border-left: 0; border-top: var(--trait) solid currentColor; }
  body.ot .ot-onglet__num { font-size: 1.8rem; }
  body.ot .ot-onglet__nom { font-size: 1.8rem; }
  body.ot .ot-onglet__legende { font-size: 1.3rem; }
  body.ot .ot-intro { padding: 6rem var(--marge) 7rem; }
  body.ot .ot-etoile-titre::after { width: 2.6rem; height: 2.6rem; margin-top: 1rem; }
  body.ot .ot-intro__texte { margin-top: 2.4rem; }
  body.ot .ot-services, body.ot .ot-clefs { padding: 7rem var(--marge) 6rem; }
  body.ot .ot-volets, body.ot .ot-clefs__liste { margin-top: 4rem; }
  body.ot .ot-volet__titre { font-size: 1.8rem; padding: 2rem 5rem 1.6rem 0; }
  body.ot .ot-volet__titre::after { width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; right: .4rem; }
  body.ot .ot-volet__corps { gap: 2rem; }
  body.ot .ot-volet.ouvert .ot-volet__corps { padding: 1.6rem 0 3rem; }
  body.ot .ot-puce { padding-left: 4rem; min-height: 2.6rem; font-size: 1.6rem; }
  body.ot .ot-puce::before { width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; }
  body.ot .ot-ajoutee { padding: 7rem var(--marge) 8rem; }
  body.ot .ot-ajoutee__cadre { margin-top: 4rem; padding: 1rem 2rem; gap: 1.6rem; }
  body.ot .ot-ajoutee__texte { font-size: 2.2rem; line-height: 1.05; }
  body.ot .ot-ajoutee__texte--long { font-size: 1.7rem; }
  body.ot .ot-clef { grid-template-columns: 3.6rem 1fr 3rem; row-gap: 1.2rem; padding: 2.4rem 0 2.8rem; }
  body.ot .ot-clef__num { font-size: 1.6rem; }
  body.ot .ot-clef__nom { font-size: 2.6rem; }
  body.ot .ot-clef__client { grid-column: 2; grid-row: 2; }
  body.ot .ot-clef__qui { font-size: 1.5rem; }
  body.ot .ot-clef__quoi { font-size: 1.4rem; }
  body.ot .ot-clef::after { grid-column: 3; grid-row: 1; width: 2.4rem; height: 2.4rem; margin: 0; }
}

/* mentions légales, confidentialité */
body.ot .ot-legal { padding: 21rem var(--marge) 16rem; }
body.ot .ot-legal__bloc { max-width: 120rem; margin-top: 8rem; }
body.ot .ot-legal__titre + .ot-legal__bloc { margin-top: 11rem; }
body.ot .ot-legal__sous { padding-bottom: 1.6rem; border-bottom: var(--trait) solid currentColor; font: 500 max(16px, 3rem)/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-legal__texte { margin-top: 2.4rem; font: 500 var(--t-corps)/1.3 var(--lateral); }
@media (max-width: 820px) {
  body.ot .ot-legal { padding: 12rem var(--marge) 7rem; }
  body.ot .ot-legal__bloc { margin-top: 4rem; }
  body.ot .ot-legal__titre + .ot-legal__bloc { margin-top: 5rem; }
  body.ot .ot-legal__sous { font-size: 1.6rem; }
}

/* en-tête posé sur un fond rouge (le script ajoute .sur-rouge) */
.ot-entete.sur-rouge { color: var(--sauge); }
/* en-tête qui revient au défilement au-dessus d'une section rouge : barre bordeaux, pas sauge */
.ot-entete.sur-rouge.fond { background: var(--rouge); }

/* =====================================================================
   RÉFÉRENCES
   ===================================================================== */
body.ot .ot-refs-page { padding: 22.8rem var(--marge) 15rem; }   /* titre à la hauteur des autres en-têtes */
body.ot .ot-refs-page__texte { margin-top: 4rem; max-width: 124rem; font: 500 max(18px, 3.6rem)/1 var(--lateral); }
body.ot .ot-refs { margin-top: 7.5rem; }
body.ot .ot-refs__filtres { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 2.6rem; }
body.ot .ot-filtre { margin: 0; padding: 0; border: 0; min-width: 0; }
body.ot .ot-filtre__titre { position: relative; width: 100%; padding: 0 0 1.4rem; border-bottom: var(--trait) solid currentColor; font: 500 max(14px, 2.4rem)/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-plus { position: absolute; right: 0; top: .2rem; width: 2rem; height: 2rem;
  background: linear-gradient(currentColor, currentColor) center / 100% var(--trait) no-repeat,
              linear-gradient(currentColor, currentColor) center / var(--trait) 100% no-repeat; }
body.ot .ot-filtre__liste { margin: 1.6rem 0 0; padding: 0; list-style: none; }
body.ot .ot-filtre__terme { all: unset; cursor: pointer; display: inline-block; padding: .25rem 0; font: 500 max(14px, 2.4rem)/1.1 var(--lateral); background: linear-gradient(currentColor, currentColor) 0 100% / 0 var(--trait) no-repeat; transition: background-size .3s; }
body.ot .ot-filtre__terme:hover, body.ot .ot-filtre__terme.actif { background-size: 100% var(--trait); }
body.ot .ot-filtre__terme.actif::after { content: " ×"; }
body.ot .ot-refs__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 10rem; }
body.ot .ot-ref { display: flex; flex-direction: column; background: var(--rouge); color: var(--sauge); }
body.ot .ot-ref[hidden] { display: none; }
body.ot .ot-ref__visuel { position: relative; display: block; aspect-ratio: 607 / 486; overflow: hidden; background: var(--sauge); }
body.ot .ot-ref__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
body.ot .ot-ref:hover .ot-ref__img { transform: scale(1.04); }
/* photos des références : déjà traitées par le Filtre Infra (bichromie mesurée + grain, importer_refs.py),
   affichées telles quelles — plus de bichromie CSS approximative par-dessus */
body.ot .ot-ref__motif { position: absolute; inset: 0; background: var(--rouge); }
body.ot .ot-ref__motif::before { content: ""; position: absolute; inset: 18%; background: var(--sauge); -webkit-mask: var(--masque-etoile); mask: var(--masque-etoile); opacity: .9; }
body.ot .ot-ref--sans-image .ot-ref__visuel { border-bottom: var(--trait) solid rgba(209,224,217,.35); }
body.ot .ot-ref__zone { position: absolute; top: 1rem; left: 1.6rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 15rem; height: 15rem; font: 500 max(11px, 2rem)/1 var(--lateral); text-transform: uppercase; color: var(--sauge); }
body.ot .ot-ref__zone::before { content: ""; position: absolute; inset: 0; background: var(--rouge); }
body.ot .ot-ref--sans-image .ot-ref__zone::before { background: var(--sauge); }
body.ot .ot-ref--sans-image .ot-ref__zone { color: var(--rouge); }
body.ot .ot-ref__zone span { position: relative; top: .1em; }
body.ot .ot-ref__corps { display: flex; flex-direction: column; flex: 1; padding: 3rem 3rem 3.2rem; }
body.ot .ot-ref__lieu { padding-bottom: .8rem; border-bottom: var(--trait) solid currentColor; font: 500 max(12px, 2rem)/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-ref__titre { margin-top: 3.6rem; font: 400 4.8rem/1 var(--ghost); }
body.ot .ot-ref__etiquettes { display: flex; flex-wrap: wrap; margin-top: auto; padding-top: 3.6rem; font: 500 max(10px, 1.4rem)/1.4 var(--lateral); text-transform: uppercase; }
body.ot .ot-ref__etiquettes span + span { margin-left: 1rem; padding-left: 1rem; border-left: var(--trait) solid currentColor; }
/* lien « Effacer la sélection » : sous les filtres, à droite, visible dès qu'un filtre est actif */
body.ot .ot-refs__effacer { all: unset; cursor: pointer; display: table; margin: 4rem 0 0 auto; padding-bottom: .4rem;
  border-bottom: var(--trait) solid currentColor; font: 500 max(14px, 2.4rem)/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-refs__effacer::before { content: "×"; margin-right: 1rem; }
body.ot .ot-refs__effacer[hidden] { display: none; }
body.ot .ot-refs__effacer:hover { opacity: .7; }
/* grille en colonnes (masonry) posée par site.js : chaque carte placée en absolu dans la colonne la plus
   courte ; au filtrage, les cartes glissent vers leur nouvelle place, les sortantes s'effacent */
body.ot .ot-refs__grille.masonry { display: block; position: relative; transition: height .7s cubic-bezier(.2,.7,.2,1); }
body.ot .ot-refs__grille.masonry .ot-ref { position: absolute; top: 0; left: 0;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .45s ease; will-change: transform; }
body.ot .ot-refs__grille.masonry .ot-ref.sortie { opacity: 0; pointer-events: none; }
body.ot .ot-refs__grille.masonry .ot-ref.entree { opacity: 0; transition: none; }
body.ot .ot-refs__vide { margin-top: 6rem; font: 400 4.8rem/1 var(--ghost); }
body.ot .ot-refs__plus { all: unset; cursor: pointer; display: table; margin: 8rem auto 0; font: 500 3rem/1 var(--lateral); text-transform: uppercase; border-bottom: var(--trait) solid currentColor; padding-bottom: .4rem; }
body.ot .ot-refs__plus[hidden] { display: none; }

/* demande du track record */
body.ot .ot-demande { display: grid; grid-template-columns: 58rem 1fr; column-gap: 7rem; padding: 14rem var(--marge) 16rem; }
body.ot .ot-demande__titre { font: 400 9rem/0.95 var(--ghost); }
body.ot .ot-demande__texte { margin-top: 3rem; font: 500 var(--t-corps)/1.15 var(--lateral); }
body.ot .ot-demande__note { margin-top: 3rem; font: 500 var(--t-corps)/1.15 var(--lateral); text-decoration: underline; text-underline-offset: .3em; }

/* formulaires (formulaire V4 d'Elementor) */
body.ot .ot-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 2.6rem; align-items: end; }
body.ot .ot-champ { display: flex; flex-direction: column; min-width: 0; }
body.ot .ot-champ--large { grid-column: 1 / -1; }
body.ot .ot-form label, body.ot .ot-champ .e-form-label-base { font: 500 max(14px, 2.4rem)/1 var(--lateral); color: inherit; }
body.ot .ot-form--ghost label, body.ot .ot-form--ghost .e-form-label-base { font: 400 max(15px, 2.4rem)/1 var(--ghost); }
body.ot .ot-form input, body.ot .ot-form select, body.ot .ot-form textarea {
  all: unset; box-sizing: border-box; width: 100%; height: auto; min-height: 5rem; padding: 1.2rem 0 1rem;
  border: 0; border-bottom: var(--trait) solid currentColor; border-radius: 0; background: transparent;
  color: inherit; font: 500 max(16px, 2.4rem)/1.2 var(--lateral);
}
body.ot .ot-form select { -webkit-appearance: none; appearance: none; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 1.2rem) 55% / .8rem .8rem no-repeat,
              linear-gradient(-45deg, transparent 50%, currentColor 50%) calc(100% - .4rem) 55% / .8rem .8rem no-repeat; }
body.ot .ot-form select option { color: var(--rouge); background: var(--sauge); }
/* liste ouverte stylée (sélecteur personnalisable, Chrome 135+) : marges, survol rouge, filet fin */
@supports (appearance: base-select) {
  body.ot .ot-form select, body.ot .ot-form select::picker(select) { appearance: base-select; }
  body.ot .ot-form select::picker-icon { display: none; }
  body.ot .ot-form select::picker(select) {
    margin-top: .6rem; padding: 1rem 0; border: var(--trait) solid var(--rouge); border-radius: 0;
    background: var(--sauge); color: var(--rouge); box-shadow: 0 1.2rem 3rem rgba(134, 43, 42, .14);
  }
  body.ot .ot-form select option { padding: 1.2rem 2.4rem; font: 500 max(15px, 2.2rem)/1.2 var(--lateral); transition: background-color .2s, color .2s; }
  body.ot .ot-form select option::checkmark { display: none; }
  body.ot .ot-form select option:hover, body.ot .ot-form select option:focus-visible, body.ot .ot-form select option:checked {
    background: var(--rouge); color: var(--sauge); outline: none; }
}
body.ot .ot-form textarea { min-height: 14rem; resize: vertical; }
body.ot .ot-form input:focus, body.ot .ot-form select:focus, body.ot .ot-form textarea:focus { border-bottom-width: 2px; }
body.ot .ot-form ::placeholder { color: inherit; opacity: .55; }
body.ot .ot-form__envoi { all: unset; grid-column: 1 / -1; justify-self: start; cursor: pointer; display: inline-flex; align-items: center; gap: 1.6rem; padding-bottom: .5rem; font: 500 3rem/1 var(--lateral); text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 var(--trait) no-repeat; transition: background-size .45s cubic-bezier(.3,.7,.2,1); }
/* survol : jamais le fond gris d'Elementor ; un filet qui se dessine sous le libellé et la flèche qui avance */
body.ot .ot-form .ot-form__envoi:is(:hover, :focus, :focus-visible, :active) {
  background-color: transparent !important; color: inherit !important; border: 0 !important; box-shadow: none !important;
  background-size: 100% var(--trait); outline: none; }
body.ot .ot-form__envoi::after { content: ""; width: 4.6rem; height: 1.4rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 14'%3E%3Cpath d='M0 7h44M38 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 14'%3E%3Cpath d='M0 7h44M38 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .3s; }
body.ot .ot-form__envoi:hover::after { transform: translateX(.8rem); }
body.ot .ot-form__mention { grid-column: 1 / -1; max-width: 110rem; font: 400 max(17px, 2.6rem)/1.2 var(--ghost); }
body.ot .ot-form .e-form-success-message-base, body.ot .ot-form .e-form-error-message-base { grid-column: 1 / -1; padding: 0; background: none; color: inherit; text-align: left; font: 500 var(--t-corps)/1.2 var(--lateral); }

/* fiche d'une référence */
body.ot .ot-fiche { padding: 21rem var(--marge) 16rem; }
body.ot .ot-fiche__retour { display: inline-block; font: 500 max(13px, 2rem)/1 var(--lateral); text-transform: uppercase; border-bottom: var(--trait) solid currentColor; }
body.ot .ot-fiche__lieu { margin-top: 7rem; font: 500 max(13px, 2.4rem)/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-fiche__titre { margin-top: 2rem; font: 400 9.6rem/0.98 var(--ghost); max-width: 150rem; }
body.ot .ot-fiche__mission { margin-top: 3.6rem; max-width: 130rem; font: 500 var(--t-corps-l)/1.12 var(--lateral); }
body.ot .ot-fiche__etiquettes { margin-top: 3rem; display: flex; flex-wrap: wrap; font: 500 max(12px, 1.8rem)/1.4 var(--lateral); text-transform: uppercase; }
body.ot .ot-fiche__etiquettes span + span { margin-left: 1rem; padding-left: 1rem; border-left: var(--trait) solid currentColor; }
body.ot .ot-fiche__visuel { position: relative; margin-top: 8rem; aspect-ratio: 16 / 7; overflow: hidden; }
body.ot .ot-fiche__visuel img { width: 100%; height: 100%; object-fit: cover; }
body.ot .ot-fiche__credit { margin-top: 1rem; font: 400 max(12px, 1.6rem)/1 var(--ghost); }
body.ot .ot-fiche__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem 6rem; margin-top: 10rem; }
body.ot .ot-fiche__bloc h2 { padding-bottom: 1.6rem; border-bottom: var(--trait) solid currentColor; font: 500 max(15px, 3rem)/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-fiche__bloc > div { margin-top: 2.6rem; font: 500 var(--t-corps)/1.25 var(--lateral); }
body.ot .ot-fiche__bloc p + p, body.ot .ot-fiche__bloc p + ul, body.ot .ot-fiche__bloc ul + p { margin-top: 1.4rem; }
body.ot .ot-fiche__bloc ul { margin: 0; padding: 0; list-style: none; }
body.ot .ot-fiche__bloc li { position: relative; padding-left: 4rem; }
body.ot .ot-fiche__bloc li + li { margin-top: 1rem; }
body.ot .ot-fiche__bloc li::before { content: ""; position: absolute; left: 0; top: .15em; width: 2.2rem; height: 2.2rem; background: currentColor; -webkit-mask: var(--masque-etoile); mask: var(--masque-etoile); }
body.ot .ot-fiche__suite { display: flex; justify-content: space-between; gap: 4rem; margin-top: 12rem; padding-top: 3rem; border-top: var(--trait) solid currentColor; }
body.ot .ot-fiche__suite .ot-lien { font-size: max(12px, 1.8rem); line-height: 1.4; }   /* taille des étiquettes */

/* =====================================================================
   ÉQUIPE
   ===================================================================== */
body.ot .ot-equipe-tete { padding: 22.8rem var(--marge) 20rem; }   /* titre à la hauteur des autres en-têtes */
body.ot .ot-equipe-tete__texte { margin-top: 5rem; max-width: 122rem; font: 500 max(18px, 3.6rem)/1 var(--lateral); }
body.ot .ot-texte-section { padding: 17rem var(--marge) 19rem; }
body.ot .ot-texte-section__texte { margin-top: 5rem; max-width: 112rem; font: 500 var(--t-corps-l)/1.12 var(--lateral); }
body.ot .ot-texte-section--centre { text-align: center; }
body.ot .ot-texte-section--centre .ot-texte-section__titre { max-width: 175rem; margin: 0 auto; font-size: 14rem; }
body.ot .ot-texte-section--centre .ot-texte-section__texte { max-width: 127rem; margin: 6rem auto 0; font: 500 4.8rem/0.96 var(--lateral); }
body.ot .ot-profils { display: grid; grid-template-columns: 1fr 1fr; gap: 9rem 5.4rem; padding: 6rem var(--marge) 18rem; }
body.ot .ot-profil { display: grid; grid-template-columns: 29.1rem 1fr; column-gap: 2.5rem; align-items: start; }
body.ot .ot-profil__photo { width: 29.1rem; aspect-ratio: 3 / 4; overflow: hidden; background: var(--rouge); }
body.ot .ot-profil__photo img { width: 100%; height: 100%; object-fit: cover; }
body.ot .ot-profil__photo--initiales { display: flex; align-items: center; justify-content: center; color: var(--sauge); font: 400 9rem/1 var(--ghost); }
body.ot .ot-profil__corps { position: relative; display: flex; flex-direction: column; min-height: 38.8rem; border-top: var(--trait) solid currentColor; }
body.ot .ot-profil__nom { margin-top: 1.8rem; padding-right: 11rem; font: 400 3.6rem/1.05 var(--ghost); }
body.ot .ot-profil__fonction { margin-top: .6rem; padding-right: 11rem; font: 500 2.8rem/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-profil__ville { position: absolute; top: 1.4rem; right: 0; display: flex; align-items: center; justify-content: center; width: 7.6rem; height: 7.6rem; font: 500 max(9px, 1.3rem)/1 var(--lateral); text-transform: uppercase; color: var(--sauge); }
body.ot .ot-profil__ville::before { content: ""; position: absolute; inset: 0; background: var(--rouge); -webkit-mask: var(--masque-etoile); mask: var(--masque-etoile); }
/* .075em ≈ 1 px à 1920 : entre .035em (jugé trop haut) et .11em (jugé trop bas) */
body.ot .ot-profil__ville p, body.ot .ot-profil__ville span { position: relative; top: .075em; }
body.ot .ot-profil__liste { display: flex; flex-direction: column; gap: .9rem; margin-top: 2.4rem; padding-top: 2.4rem; border-top: var(--trait) solid currentColor; }
body.ot .ot-fleche { position: relative; padding-left: 3.6rem; font: 500 max(13px, 1.8rem)/1.1 var(--lateral); }
body.ot .ot-fleche::before { content: ""; position: absolute; left: 0; top: .25em; width: 2.6rem; height: .9em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 6h24M19 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") left center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 6h24M19 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") left center/contain no-repeat; }
body.ot .ot-profil__legende { margin-top: auto; padding: 1.6rem 0; border-top: var(--trait) solid currentColor; border-bottom: var(--trait) solid currentColor; font: 400 max(13px, 2rem)/1.1 var(--lateral); }

/* =====================================================================
   NOTRE HISTOIRE
   ===================================================================== */
/* haut de page : grand titre en haut de la photo (maquette), sans filet */
/* titre à la même hauteur que ceux des Services et du Contact (haut du titre à ~228 px en 1920) */
body.ot .ot-tete--histoire { min-height: 92.5rem; justify-content: flex-start; padding: 22.8rem var(--marge) 8rem; }
body.ot .ot-tete--histoire .ot-tete__titre { display: block; position: relative; padding: 0 0 0 0; border: 0; font-size: 14.4rem; line-height: 0.9; text-indent: 11rem; }
body.ot .ot-tete--histoire .ot-tete__titre::before { position: absolute; left: 0; top: .9rem; width: 9rem; height: 9.5rem; }
/* introduction : un seul texte depuis les corrections du 28/10 (la maquette en avait trois colonnes) */
body.ot .ot-histoire-intro { display: grid; grid-template-columns: minmax(0, 120rem); align-content: center; padding: 9rem var(--marge); }
body.ot .ot-histoire-intro__texte { padding: 0 4rem 0 2rem; font: 500 max(16px, 2.4rem)/1.33 var(--lateral); }
body.ot .ot-histoire-intro__texte + .ot-histoire-intro__texte { border-left: var(--trait) solid currentColor; padding-left: 1.6rem; }
body.ot .ot-frise-section { padding: 14rem var(--marge) 16rem; overflow: hidden; }
/* frise : 10 jalons, impairs au-dessus de l'axe, pairs dessous, décalés d'une demi-colonne ; piste plus
   large que l'écran, ferrée à gauche, déplacée par le script (glisser + flèches).
   Rangées : contenu haut (hauteur du plus long jalon) | bande de l'axe (16rem, axe au milieu) | contenu bas :
   pas de vide entre le titre et la frise. Chaque trait part du haut de son contenu et rejoint l'axe ;
   l'année est posée à droite du trait, juste au-dessus de l'axe (impairs) ou juste dessous (pairs). */
body.ot .ot-frise { --haut: 40rem; position: relative; display: grid; grid-template-columns: repeat(20, 1fr); grid-template-rows: var(--haut) 16rem auto; margin-top: 12rem;
  width: max(230rem, 1900px); -webkit-user-select: none; user-select: none; touch-action: pan-y; will-change: transform; }
/* aucune transition sur la piste : Elementor en pose une par défaut (transform .4s ease) qui lissait chaque
   déplacement du script, puis rattrapait d'un coup à l'arrêt → effet d'accélération en fin de course */
body.ot .ot-frise { transition: none !important; }
body.ot .ot-frise img { -webkit-user-drag: none; }
/* axe au milieu de la rangée centrale ; --haut = hauteur du plus long jalon du haut, mesurée par site.js */
body.ot .ot-frise::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--haut) + 8rem); border-top: var(--trait) solid currentColor; }
body.ot .ot-jalon { position: relative; display: flex; flex-direction: column; min-width: 0; padding-right: 1.6rem; }
body.ot .ot-jalon:nth-child(odd) { grid-row: 1; align-self: end; }
body.ot .ot-jalon:nth-child(even) { grid-row: 3; align-self: start; }
body.ot .ot-jalon:nth-child(1) { grid-column: 1 / 5; } body.ot .ot-jalon:nth-child(2) { grid-column: 3 / 7; }
body.ot .ot-jalon:nth-child(3) { grid-column: 5 / 9; } body.ot .ot-jalon:nth-child(4) { grid-column: 7 / 11; }
body.ot .ot-jalon:nth-child(5) { grid-column: 9 / 13; } body.ot .ot-jalon:nth-child(6) { grid-column: 11 / 15; }
body.ot .ot-jalon:nth-child(7) { grid-column: 13 / 17; } body.ot .ot-jalon:nth-child(8) { grid-column: 15 / 19; }
body.ot .ot-jalon:nth-child(9) { grid-column: 17 / 21; } body.ot .ot-jalon:nth-child(10) { grid-column: 19 / 21; }
body.ot .ot-jalon::before { content: ""; position: absolute; left: 0; border-left: var(--trait) solid currentColor; }
body.ot .ot-jalon:nth-child(odd)::before { top: 0; bottom: -8rem; }
body.ot .ot-jalon:nth-child(even)::before { top: -8rem; bottom: 0; }
body.ot .ot-jalon > * { padding-left: 2.6rem; }
body.ot .ot-jalon__annee { position: absolute; left: 0; padding-left: 1.6rem !important; font: 400 4.8rem/1 var(--ghost); white-space: nowrap; }
body.ot .ot-jalon:nth-child(odd) .ot-jalon__annee { bottom: -7.2rem; }
body.ot .ot-jalon:nth-child(even) .ot-jalon__annee { top: -5.9rem; }   /* même écart au trait que les dates du haut */
body.ot .ot-jalon__titre { padding-bottom: 1.4rem; border-bottom: var(--trait) solid currentColor; margin-left: 2.6rem; padding-left: 0 !important; max-width: 24rem; font: 500 max(13px, 2.4rem)/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-jalon__texte { margin-top: 1.6rem; max-width: 26rem; font: 400 max(12px, 1.6rem)/1.15 var(--lateral); }
body.ot .ot-jalon__texte + .ot-jalon__texte { margin-top: 1rem; }
body.ot .ot-nom { padding: 17rem var(--marge) 20rem; text-align: center; }
body.ot .ot-nom__texte { max-width: 112rem; margin: 9rem auto 0; font: 500 max(18px, 3.6rem)/1.05 var(--lateral); }
body.ot .ot-independance { padding: 18rem var(--marge) 16rem; text-align: center; }
body.ot .ot-independance__titre { max-width: 130rem; margin: 0 auto; }
body.ot .ot-independance__sous { margin-top: 4rem; font: 500 max(16px, 3rem)/1.1 var(--lateral); }
body.ot .ot-independance__chiffre { margin-top: 9rem; font: 500 20rem/0.85 var(--lateral); }
body.ot .ot-independance__libelle { margin-top: 1.6rem; font: 400 6.4rem/1 var(--ghost); }
body.ot .ot-independance__points { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; max-width: 140rem; margin: 12rem auto 0; text-align: left; }
body.ot .ot-point { display: flex; flex-direction: column; gap: 2rem; padding-top: 3rem; border-top: var(--trait) solid currentColor; }
body.ot .ot-point__num { font: 500 4.8rem/1 var(--lateral); }
body.ot .ot-point__texte { font: 500 max(16px, 3rem)/1.1 var(--lateral); }
body.ot .ot-engagements__sous { margin-top: 5rem; font: 500 max(15px, 3rem)/1 var(--lateral); text-transform: uppercase; }
body.ot .ot-valeur--fin .ot-valeur__nom { font-size: 7.2rem; }

/* =====================================================================
   CONTACT
   ===================================================================== */
/* en-tête calqué sur celui des Services (même hauteur, même calage) ; titre sur deux lignes : l'étoile
   reste à hauteur de la première ligne */
body.ot .ot-contact-form { padding: 22rem var(--marge) 7rem; }
body.ot .ot-bureaux-contact { padding: 18rem var(--marge) 18rem; text-align: center; }
body.ot .ot-bureaux-contact__grille { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 9rem; margin-top: 12rem; }
/* 8rem (29/10, avant 12rem) : « AMÉRIQUE » débordait de sa colonne */
body.ot .ot-bureau--contact .ot-bureau__ville { font-size: 8rem; }
body.ot .ot-bureau__adresse { margin-top: 2rem; font: 500 max(16px, 3rem)/1.2 var(--lateral); }

@media (max-width: 820px) {
  body.ot .ot-refs-page { padding: 14rem var(--marge) 7rem; }
  body.ot .ot-refs-page__texte { font-size: 1.8rem; line-height: 1.1; }
  body.ot .ot-refs__filtres { grid-template-columns: 1fr; row-gap: 1.6rem; }
  body.ot .ot-filtre__titre { font-size: 1.6rem; cursor: pointer; }
  body.ot .ot-filtre__liste { display: none; }
  body.ot .ot-filtre.ouvert .ot-filtre__liste { display: block; }
  body.ot .ot-filtre__terme { font-size: 1.6rem; padding: .5rem 0; }
  body.ot .ot-refs__grille { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 4rem; }
  body.ot .ot-ref__zone { width: 9rem; height: 9rem; font-size: 1.2rem; }
  body.ot .ot-ref__corps { padding: 2rem 1.6rem 2.2rem; }
  body.ot .ot-ref__lieu { font-size: 1.2rem; }
  body.ot .ot-ref__titre { margin-top: 2rem; font-size: 3rem; }
  body.ot .ot-ref__etiquettes { font-size: 1.1rem; padding-top: 2rem; }
  body.ot .ot-refs__plus { font-size: 1.7rem; margin-top: 4rem; }
  body.ot .ot-demande { grid-template-columns: 1fr; row-gap: 4rem; padding: 7rem var(--marge) 8rem; }
  body.ot .ot-demande__titre { font-size: 4.6rem; }
  body.ot .ot-form { grid-template-columns: 1fr; gap: 2.4rem; }
  body.ot .ot-form label, body.ot .ot-champ .e-form-label-base { font-size: 1.5rem; }
  body.ot .ot-form input, body.ot .ot-form select, body.ot .ot-form textarea { font-size: 1.6rem; min-height: 4.4rem; }
  body.ot .ot-form__envoi { font-size: 1.7rem; }
  body.ot .ot-fiche { padding: 12rem var(--marge) 8rem; }
  body.ot .ot-fiche__retour { font-size: 1.3rem; }
  body.ot .ot-fiche__lieu { margin-top: 4rem; font-size: 1.3rem; }
  body.ot .ot-fiche__titre { font-size: 4.2rem; }
  body.ot .ot-fiche__mission { font-size: 1.7rem; }
  body.ot .ot-fiche__etiquettes { font-size: 1.2rem; }
  body.ot .ot-fiche__visuel { margin-top: 4rem; aspect-ratio: 4 / 3; }
  body.ot .ot-fiche__grille { grid-template-columns: 1fr; gap: 4rem; margin-top: 5rem; }
  body.ot .ot-fiche__bloc h2 { font-size: 1.7rem; }
  body.ot .ot-fiche__bloc > div { font-size: 1.6rem; }
  body.ot .ot-fiche__bloc li { padding-left: 2.6rem; }
  body.ot .ot-fiche__bloc li::before { width: 1.4rem; height: 1.4rem; }
  body.ot .ot-fiche__suite { flex-direction: column; margin-top: 6rem; font-size: 1.5rem; }
  body.ot .ot-fiche__suite .ot-lien { font-size: 1.2rem; }

  body.ot .ot-equipe-tete { padding: 14rem var(--marge) 7rem; }
  body.ot .ot-equipe-tete__texte { margin-top: 2.4rem; font-size: 1.8rem; line-height: 1.1; }
  body.ot .ot-texte-section { padding: 7rem var(--marge) 8rem; }
  body.ot .ot-texte-section__texte { margin-top: 2.4rem; }
  body.ot .ot-texte-section--centre .ot-texte-section__titre { font-size: 4.4rem; }
  body.ot .ot-texte-section--centre .ot-texte-section__texte { margin-top: 2.4rem; font-size: 2rem; line-height: 1.1; }
  body.ot .ot-profils { grid-template-columns: 1fr; gap: 4rem; padding: 3rem var(--marge) 8rem; }
  body.ot .ot-profil { grid-template-columns: 11rem 1fr; column-gap: 1.4rem; }
  body.ot .ot-profil__photo { width: 11rem; }
  body.ot .ot-profil__corps { min-height: 0; }
  body.ot .ot-profil__nom { margin-top: 1rem; padding-right: 5rem; font-size: 2.2rem; }
  body.ot .ot-profil__fonction { padding-right: 5rem; font-size: 1.4rem; }
  body.ot .ot-profil__ville { width: 4.4rem; height: 4.4rem; font-size: .8rem; top: .8rem; }
  body.ot .ot-profil__liste { margin-top: 1.2rem; padding-top: 1.2rem; gap: .6rem; }
  body.ot .ot-fleche { font-size: 1.3rem; padding-left: 2.4rem; }
  body.ot .ot-fleche::before { width: 1.8rem; }
  body.ot .ot-profil__legende { margin-top: 1.2rem; padding: 1rem 0; font-size: 1.3rem; }

  body.ot .ot-tete--histoire { min-height: 0; padding: 14rem var(--marge) 8rem; }
  body.ot .ot-tete--histoire .ot-tete__titre { font-size: 4.2rem; text-indent: 4.4rem; }
  body.ot .ot-tete--histoire .ot-tete__titre::before { width: 3.4rem; height: 3.6rem; top: .4rem; }
  body.ot .ot-histoire-intro { grid-template-columns: 1fr; row-gap: 2.4rem; padding: 5.5rem var(--marge); }
  body.ot .ot-histoire-intro__texte { padding: 0; font-size: 1.7rem; line-height: 1.25; }
  body.ot .ot-histoire-intro__texte + .ot-histoire-intro__texte { border-left: 0; border-top: var(--trait) solid currentColor; padding: 2.4rem 0 0; }
  body.ot .ot-frise-section { padding: 7rem var(--marge); }
  body.ot .ot-frise { display: flex; flex-direction: column; margin-top: 6rem; padding-left: 1rem; border-left: var(--trait) solid currentColor;
    width: auto; cursor: auto; transform: none !important; -webkit-user-select: auto; user-select: auto; }
  body.ot .ot-frise::before { display: none; }
  body.ot .ot-jalon, body.ot .ot-jalon:nth-child(odd), body.ot .ot-jalon:nth-child(even) { padding: 0 0 3.6rem; }
  body.ot .ot-jalon::before { display: none; }
  body.ot .ot-jalon > * { padding-left: 1.4rem; }
  body.ot .ot-jalon__annee, body.ot .ot-jalon:nth-child(odd) .ot-jalon__annee, body.ot .ot-jalon:nth-child(even) .ot-jalon__annee { position: static; transform: none; padding-left: 1.4rem !important; font-size: 3rem; background: none; }
  body.ot .ot-jalon__titre { margin: 1rem 0 0 1.4rem; font-size: 1.5rem; max-width: none; }
  body.ot .ot-jalon__texte { font-size: 1.4rem; max-width: none; }
  body.ot .ot-nom, body.ot .ot-independance { padding: 7rem var(--marge) 8rem; }
  body.ot .ot-nom__texte { margin-top: 3rem; font-size: 1.8rem; }
  body.ot .ot-independance__sous { font-size: 1.6rem; margin-top: 2rem; }
  body.ot .ot-independance__chiffre { margin-top: 4rem; font-size: 8rem; }
  body.ot .ot-independance__libelle { font-size: 3rem; }
  body.ot .ot-independance__points { grid-template-columns: 1fr; gap: 2.4rem; margin-top: 5rem; }
  body.ot .ot-point__num { font-size: 2rem; }
  body.ot .ot-point__texte { font-size: 1.6rem; }
  body.ot .ot-engagements__sous { margin-top: 2rem; font-size: 1.5rem; }
  body.ot .ot-valeur--fin .ot-valeur__nom { font-size: 2.8rem; }

  body.ot .ot-contact-form { padding: 7rem var(--marge) 5rem; }
  body.ot .ot-bureaux-contact { padding: 7rem var(--marge) 8rem; }
  body.ot .ot-bureaux-contact__grille { grid-template-columns: 1fr; row-gap: 4rem; margin-top: 4rem; }
  body.ot .ot-bureau--contact .ot-bureau__ville { font-size: 5rem; }
  body.ot .ot-bureau__adresse { font-size: 1.5rem; }
}

/* =====================================================================
   TACTILE : aucun état parasite au toucher (surbrillance bleue, rose #c36 du thème Hello sur les boutons
   focalisés, survols qui restent « collés » après un tap, contours de focus sans clavier)
   ===================================================================== */
html { -webkit-tap-highlight-color: transparent; }
body.ot :is(button, [type="button"], [type="submit"]):is(:hover, :focus, :active) { background-color: transparent; color: inherit; }
body.ot :is(a, button, [role="button"], select, input, textarea):focus:not(:focus-visible) { outline: none; }
@media (hover: none) {
  body.ot .ot-entete__menu li:not(.ot-actif):not(.current-menu-item) > a:hover,
  body.ot .ot-pied__menu a:hover, body.ot .ot-filtre__terme:not(.actif):hover { background-size: 0 var(--trait); }
  body.ot .ot-langues a:not(.actif):hover { opacity: .45; }
  body.ot .ot-lien:hover { gap: 1.6rem; }
  body.ot .ot-onglet:not(.ot-onglet--actif):hover { background: transparent; color: var(--rouge); }
  body.ot .ot-onglet:hover + .ot-onglet::before, body.ot .ot-onglet:not(.ot-onglet--actif):hover::before { display: block; }
  body.ot .ot-carte:hover .ot-carte__visuel img, body.ot .ot-ref:hover .ot-ref__img { transform: none; }
  body.ot .ot-valeur:hover::after { transform: none; }
  body.ot .ot-form__envoi:hover::after { transform: none; }
}

/* =====================================================================
   ALIGNEMENT HOMOGÈNE (retour client « parfois centré, parfois pas ») : tous les titres et textes de
   section alignés à gauche, sur la marge ; plus aucune section centrée.
   ===================================================================== */
body.ot .ot-bureaux, body.ot .ot-bureaux-contact, body.ot .ot-ajoutee, body.ot .ot-texte-section--centre,
body.ot .ot-nom, body.ot .ot-independance, body.ot .ot-zones__titre { text-align: left; }
body.ot .ot-bureaux__titre, body.ot .ot-ajoutee__titre, body.ot .ot-texte-section--centre .ot-texte-section__titre,
body.ot .ot-texte-section--centre .ot-texte-section__texte, body.ot .ot-nom__texte, body.ot .ot-independance__titre,
body.ot .ot-independance__points { margin-left: 0; margin-right: 0; }
body.ot .ot-bureau { align-items: flex-start; padding-left: 4rem; padding-right: 4rem; }
body.ot .ot-ajoutee__cadre { margin-left: 0; margin-right: 0; padding-left: 4rem; padding-right: 0; border-right: 0; }
@media (max-width: 820px) {
  body.ot .ot-bureau { padding-left: 1.6rem; padding-right: 1rem; }
  body.ot .ot-ajoutee__cadre { padding-left: 1.6rem; }
}

/* =====================================================================
   CURSEUR, ASCENSEUR
   ===================================================================== */
html.curseur-actif, html.curseur-actif * { cursor: none !important; }
@media (pointer: fine) and (hover: hover) {   /* masqué par défaut, même avant le script (voir functions.php) */
  body.ot:not(.elementor-editor-active), body.ot:not(.elementor-editor-active) *,
  body.ot:not(.elementor-editor-active) *::before, body.ot:not(.elementor-editor-active) *::after { cursor: none !important; }
}
/* curseur : disque bordeaux sur fond sauge, sauge sur fond bordeaux ; sur un lien il se transforme en
   étoile de la marque (deux tracés de même structure, 16 courbes, interpolés par clip-path) */
.curseur {
  position: fixed; left: 0; top: 0; z-index: 9999; width: 39px; height: 39px; margin: -19.5px 0 0 -19.5px;
  pointer-events: none; opacity: 0; will-change: transform;
}
.curseur__forme {
  display: block; width: 100%; height: 100%; background: var(--rouge);
  transform: scale(.75) rotate(-45deg);   /* 29 px affichés (tracés en 39 px) ; −45°, invisible sur le disque */
  clip-path: path("M16.29 0.27 C18.42 -0.09 20.58 -0.09 22.71 0.27 C22.91 0.30 23.12 0.34 23.32 0.38 C31.04 1.92 37.08 7.96 38.62 15.68 C38.65 15.83 38.68 15.98 38.71 16.13 C39.10 18.36 39.10 20.64 38.71 22.87 C38.68 23.02 38.65 23.17 38.62 23.32 C37.08 31.04 31.04 37.08 23.32 38.62 C23.12 38.66 22.91 38.70 22.71 38.73 C20.58 39.09 18.42 39.09 16.29 38.73 C16.09 38.70 15.88 38.66 15.68 38.62 C7.96 37.08 1.92 31.04 0.38 23.32 C0.35 23.17 0.32 23.02 0.29 22.87 C-0.10 20.64 -0.10 18.36 0.29 16.13 C0.32 15.98 0.35 15.83 0.38 15.68 C1.92 7.96 7.96 1.92 15.68 0.38 C15.88 0.34 16.09 0.30 16.29 0.27 Z");
  transition: clip-path .45s cubic-bezier(.3,.7,.2,1), background-color .15s, transform .45s cubic-bezier(.3,.7,.2,1);
}
.curseur.visible { opacity: 1; transition: opacity .3s; }
.curseur.sans-fondu { transition: none; }
.curseur.sur-rouge .curseur__forme { background: var(--sauge); }
.curseur.lien .curseur__forme {
  transform: scale(.94) rotate(0deg);   /* tourne de 45° pendant le morph et arrive droite (même durée, même courbe) */
  clip-path: path("M16.25 0.00 C18.42 0.00 20.58 0.00 22.75 0.00 C22.75 1.08 22.75 2.17 22.75 3.25 C22.75 10.43 28.57 16.25 35.75 16.25 C36.51 16.25 37.27 16.25 38.03 16.25 C38.03 18.42 38.03 20.58 38.03 22.75 C37.27 22.75 36.51 22.75 35.75 22.75 C28.57 22.75 22.75 28.57 22.75 35.75 C22.75 36.83 22.75 37.92 22.75 39.00 C20.58 39.00 18.42 39.00 16.25 39.00 C16.25 37.92 16.25 36.83 16.25 35.75 C16.25 28.57 10.43 22.75 3.25 22.75 C2.49 22.75 1.73 22.75 0.97 22.75 C0.97 20.58 0.97 18.42 0.97 16.25 C1.73 16.25 2.49 16.25 3.25 16.25 C10.43 16.25 16.25 10.43 16.25 3.25 C16.25 2.17 16.25 1.08 16.25 0.00 Z");
}
/* ascenseur : repris tel quel de la landing (rail plein collé au bord droit, pouce à 2 px) */
@media (min-width: 821px) and (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}
.ascenseur { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: 10px; background: #d1e0d8; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.ascenseur.visible, .ascenseur.glisse { opacity: 1; pointer-events: auto; transition-duration: .12s; }
.ascenseur.inutile { display: none; }
.ascenseur__pouce { position: absolute; top: 0; left: 2px; right: 2px; border-radius: 3px; background: #872a2a; cursor: grab; touch-action: none; }
.ascenseur.glisse .ascenseur__pouce { cursor: grabbing; }
@media (max-width: 820px), (pointer: coarse) { .ascenseur { display: none; } }

/* =====================================================================
   MOBILE (< 821 px) : 1rem = 10 px sur 390 px de large
   ===================================================================== */
@media (max-width: 820px) {
  html { font-size: 2.5641vw; }
  :root { --marge: 2rem; --t-corps: 1.7rem; --t-corps-l: 1.9rem; --t-petit: 1.4rem; --glass-blur: 1rem; }
  body.ot .ot-titre-xl { font-size: 5.6rem; line-height: 1; }
  body.ot .ot-titre-l, body.ot .ot-titre-m { font-size: 4.6rem; }
  body.ot .ot-lien { font-size: 1.7rem; }

  .ot-entete, .ot-entete.fond { height: 6.4rem; }
  .ot-entete__logo { width: 17rem; }
  .ot-burger { display: block; position: relative; width: 3.2rem; height: 2rem; background: none; border: 0; padding: 0; color: inherit; }
  .ot-burger span, .ot-burger::before, .ot-burger::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s, opacity .3s; }
  .ot-burger::before { top: 0; } .ot-burger span { top: 50%; } .ot-burger::after { bottom: 0; }
  .menu-ouvert .ot-burger::before { transform: translateY(1rem) rotate(45deg); }
  .menu-ouvert .ot-burger span { opacity: 0; }
  .menu-ouvert .ot-burger::after { transform: translateY(-.85rem) rotate(-45deg); }
  .ot-entete__nav {
    position: fixed; inset: 6.4rem 0 0; flex-direction: column; align-items: flex-start; justify-content: space-between;
    padding: 4rem var(--marge) 3rem; background: var(--sauge);
    opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
  }
  .menu-ouvert .ot-entete__nav { opacity: 1; visibility: visible; }
  .menu-ouvert .ot-entete { background: var(--sauge); transform: none; }
  /* menu ouvert (fond sauge) : texte bordeaux même si la page est rouge sous l'en-tête (sinon sauge sur sauge) */
  .menu-ouvert .ot-entete, .menu-ouvert .ot-entete.sur-rouge { color: var(--rouge); }
  .menu-ouvert .ot-entete.sur-rouge.fond { background: var(--sauge); }
  .ot-entete__menu { flex-direction: column; gap: 1.4rem; }
  .ot-entete__menu a { margin: 0; font: 400 3.2rem/1 var(--ghost); text-transform: none; }
  .ot-langues { margin: 0; font-size: 1.6rem; }

  .ot-pied { padding: 5rem var(--marge) 2rem; }
  .ot-pied__menu { gap: 1.2rem 2.4rem; font-size: 1.3rem; }
  .ot-pied__mentions { margin-top: 4rem; font-size: 1.5rem; }
  .ot-pied__logo { margin-top: 5rem; }

  body.ot .ot-vitre { height: 46rem; }

  body.ot .ot-hero { min-height: 100svh; }
  body.ot .ot-hero__contenu { margin-top: 15rem; padding: 0 var(--marge); width: 100%; box-sizing: border-box; }
  body.ot .ot-hero__titre { font-size: 5.2rem; line-height: .95; }
  body.ot .ot-hero__texte { max-width: none; }
  body.ot .ot-hero__texte { margin-top: 3rem; font-size: 1.7rem; line-height: 1.1; }
  body.ot .ot-hero__bouton { font-size: 1.7rem; }
  body.ot .ot-hero__piliers { grid-template-columns: 1fr; justify-items: center; gap: .6rem; bottom: 3rem; }
  body.ot .ot-hero__piliers > * { justify-self: center !important; }
  body.ot .ot-hero__pilier { font-size: 2.4rem; }

  body.ot .ot-roles { padding: 7rem var(--marge) 8rem; }
  body.ot .ot-roles__titre { font-size: 4.2rem; }
  body.ot .ot-roles__grille { grid-template-columns: 1fr; row-gap: 3rem; margin-top: 5rem; }
  body.ot .ot-roles__visuel { order: -1; width: 70%; justify-self: center; }
  body.ot .ot-roles__col, body.ot .ot-roles__col--droite { gap: 3rem; text-align: left; }
  body.ot .ot-role { padding-bottom: 2.4rem; }
  body.ot .ot-role__titre { font-size: 2.6rem; }
  body.ot .ot-role__texte { font-size: 1.5rem; margin-top: 1.2rem; }

  body.ot .ot-zones { grid-template-columns: repeat(3, 1fr); row-gap: 3rem; column-gap: 1.2rem; padding: 6rem var(--marge); }
  body.ot .ot-zones__titre { grid-column: 1 / -1; font-size: 4.6rem; }
  /* une seule ligne, dans la branche horizontale de l'étoile (2 lignes débordaient sur le fond) */
  body.ot .ot-zone__nom { font-size: 1.1rem; white-space: nowrap; letter-spacing: -.01em; }

  body.ot .ot-chiffres { padding: 7rem var(--marge) 8rem; }
  body.ot .ot-chiffres__grille { grid-template-columns: 1fr 1fr; margin-top: 5rem; row-gap: 5rem; }
  body.ot .ot-chiffre { padding: 1.4rem 1rem 1.4rem 1.6rem; }
  body.ot .ot-chiffre:nth-child(3n) { border-right: 0; }
  body.ot .ot-chiffre:nth-child(2n) { border-right: var(--trait) solid currentColor; }
  body.ot .ot-chiffre::before { display: none; }
  body.ot .ot-chiffre__nombre { font-size: 6.4rem; }
  body.ot .ot-chiffre__unite { font-size: 3rem; }
  body.ot .ot-chiffre__libelle { font-size: 1.4rem; margin-top: .8rem; }

  body.ot .ot-exemples { padding: 7rem 0 6rem; }
  body.ot .ot-defile { margin-top: 4rem; gap: 1.2rem; scroll-snap-type: x mandatory; }
  body.ot .ot-carte { flex-basis: 30rem; scroll-snap-align: start; }
  body.ot .ot-carte__visuel { height: 24rem; }
  body.ot .ot-pastille { width: 9rem; }
  body.ot .ot-carte__corps { padding: 2rem 1.6rem 2.4rem; min-height: 0; }
  body.ot .ot-carte__surtitre { font-size: 1.2rem; }
  body.ot .ot-carte__titre { margin-top: 2rem; font-size: 2.8rem; }
  body.ot .ot-carte__texte { font-size: 1.5rem; }
  body.ot .ot-exemples__lien { margin-top: 4rem; }

  body.ot .ot-bureaux { padding: 7rem var(--marge) 9rem; }
  /* mobile : Paris puis Madrid l'un sous l'autre (en deux colonnes, MADRID débordait) */
  body.ot .ot-bureaux__grille { grid-template-columns: 1fr; row-gap: 3rem; margin-top: 5rem; }
  body.ot .ot-bureau:last-child { border-right: 0; }
  body.ot .ot-bureau__ville { font-size: 5.4rem; }
  body.ot .ot-bureau__role { font-size: 1.8rem; margin-top: 1.2rem; }
  body.ot .ot-bureau__depuis { font-size: 1.5rem; }

  body.ot .ot-distingue { padding: 7rem var(--marge) 6rem; }
  body.ot .ot-valeurs { margin-top: 5rem; }
  body.ot .ot-valeur { grid-template-columns: 3.6rem 1fr 3rem; row-gap: 1.4rem; padding: 2.4rem 0 2.8rem; }
  body.ot .ot-valeur__num { font-size: 1.6rem; }
  body.ot .ot-valeur__nom { font-size: 3.6rem; }
  body.ot .ot-valeur__texte { grid-column: 2 / 3; grid-row: 2; font-size: 1.6rem; line-height: 1.15; }
  body.ot .ot-valeur::after { grid-column: 3; grid-row: 1; width: 2.4rem; height: 2.4rem; margin: 0; }
}

/* =====================================================================
   RÈGLE DES TITRES (28/10) : jamais un titre plus large que 70 % de l'écran (bureau). En fin de fichier
   pour primer sur les largeurs propres à chaque titre (!important contre les sélecteurs plus précis).
   Titres à filet pleine largeur (en-têtes) ou à étoile calée à droite (introductions Services) : le
   texte est limité par une marge intérieure à droite, le filet et l'étoile gardent leur place.
   En-têtes de page : titre toujours à la même hauteur (haut du titre à 22,8rem), quel que soit le texte
   dessous — avant, celui des Services, calé en bas du bandeau, remontait plus haut que les autres.
   ===================================================================== */
@media (min-width: 821px) {
  body.ot :is(h1, h2, .ot-titre-xl, .ot-titre-l):not(.ot-tete__titre):not(.ot-intro__titre) { max-width: 70vw !important; }
  body.ot .ot-tete__titre:not(.x) { padding-right: calc(100% - 70vw); }
  body.ot .ot-intro__titre { position: relative; padding-right: calc(100% - 70vw + var(--marge)); }
  body.ot .ot-intro__titre.ot-etoile-titre::after { position: absolute; right: 0; top: 0; }
  body.ot .ot-tete:not(.x) { justify-content: flex-start; padding-top: 22.8rem; padding-bottom: 8rem; }
  /* Notre histoire : bandeau sans sous-titre → titre centré verticalement dans le bandeau (29/10) */
  body.ot .ot-tete--histoire:not(.x) { justify-content: center; padding-top: 8rem; padding-bottom: 8rem; }
  /* paragraphes : même règle des 70 % (sous-titres d'en-tête, introductions, textes de section) */
  body.ot :is(p, .ot-tete__texte, [class*="__texte"], [class*="__sous"]) { max-width: 70vw !important; }
  /* titres des volets : texte limité, la croix d'ouverture reste au bord droit */
  body.ot .ot-volet__titre { padding-right: calc(100% - 70vw); }
}