/* ═══════════════════════════════════════════════════════════
   M.A.S Consulting — feuille de style
   Charte : titres Syne Bold · texte Arimo
   Bleu nuit #081D3A · Rose #BE747E · Ivoire #F8F2ED
   Polices embarquées localement (site/fonts/) — plus de dépendance à un
   CDN externe au chargement de la page (voir @font-face ci-dessous).
   ═══════════════════════════════════════════════════════════ */
@font-face{font-family:"Arimo";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/arimo-400.woff2") format("woff2")}
@font-face{font-family:"Arimo";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/arimo-500.woff2") format("woff2")}
@font-face{font-family:"Arimo";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/arimo-600.woff2") format("woff2")}
@font-face{font-family:"Arimo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/arimo-700.woff2") format("woff2")}
@font-face{font-family:"Syne";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/syne-700.woff2") format("woff2")}

:root{
  --navy:#081d3a;
  --pink:#be747e;
  --cream:#f8f2ed;
  --white:#fff;
  --text:#18283f;
  --muted:#5d6978;
  --line:#ded4cc;

  /* ═══ RÉGLAGES RAPIDES DU HERO — modifiables à la main ═══
     Change juste le nombre, garde l'unité (px / s). */
  --note-gap: 14px;          /* écart entre la lettre et sa note */
  --note-appear-time: .3s;   /* durée du fondu d'apparition de la note */

  /* Déplacement manuel de chaque note (X = droite/gauche, Y = bas/haut).
     Astuce : ouvre la page avec #place à la fin de l'adresse pour glisser
     les notes à la souris, puis clique « Copier le CSS » et colle ici. */
  --note-m-x: 9px;  --note-m-y: -37px;
  --note-a-x: 4px;  --note-a-y: -39px;
  --note-s-x: 2px;  --note-s-y: -35px;

  --header-logo-width: 149px; /* largeur du logo dans l'en-tête, réglable dans le mode #place */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--cream);color:var(--text);font-family:"Arimo",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:"Syne","Arial Black",Arial,sans-serif;font-weight:700}

/* ═══ Boutons & liens ═══ */
.button{display:inline-flex;align-items:center;gap:22px;background:var(--pink);color:#fff;border:0;padding:17px 22px;font:700 11px/1 "Arimo",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s}
.button:hover{background:#b96875;transform:translateY(-1px)}
.button-small{padding:14px 17px;gap:14px}
.text-link{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid;padding-bottom:6px}
.site-header nav a:hover,.text-link:hover{color:var(--pink)}
.eyebrow{margin:0 0 20px;color:var(--pink);font-size:11px;font-weight:700;letter-spacing:.13em}

/* ═══ En-tête ═══ */
.site-header{height:100px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(8,29,58,.09);background:rgba(248,242,237,.96);position:sticky;top:0;z-index:20}
/* header-brand garde une largeur FIXE dans le flex (n'influence jamais la
   position du menu/bouton à droite) ; le logo à l'intérieur est en
   position absolue et peut grandir/rétrécir librement par-dessus, sans
   jamais pousser le reste de l'en-tête. */
.header-brand{position:relative;flex:0 0 150px;height:60px;display:block}
.header-logo{position:absolute;left:0;top:50%;transform:translateY(-50%);width:var(--header-logo-width,150px);max-width:none}
.site-header nav{display:flex;gap:2.4vw;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* ═══ Sections ═══ */
.section{padding:105px 5vw}
.section-heading{max-width:800px;margin-bottom:55px}
.section-heading h2,.formats h2,.about h2,.contact h2{margin:0;font-size:46px;line-height:1.08;letter-spacing:-.04em}
.section-heading>p:last-child{max-width:680px;margin:22px 0 0;font-size:15px;line-height:1.75;color:var(--muted)}

/* ═══ Hero ═══ */
.hero{min-height:700px;padding:65px 4.5vw;display:grid;grid-template-columns:53% 47%;align-items:center;overflow:visible;background:radial-gradient(circle at 76% 43%,rgba(190,116,126,.10),transparent 28%)}
.hero-copy{padding-right:5vw;position:relative;z-index:4}
.hero h1{max-width:760px;margin:0;font-size:clamp(46px,4.3vw,70px);line-height:1.02;letter-spacing:-.055em}
.hero h1 b{color:var(--pink);font-weight:700}
.lead{max-width:660px;margin:30px 0 28px;font-size:16px;line-height:1.7}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

.hero-visual{height:540px;position:relative;overflow:visible}

/* Visuel complet du hero (monogramme + arcs + décor), fichier unique
   "Visuel HERO.svg" fourni par Fred — remplace les 2 anciens éléments
   séparés (arcs + monogramme). Affiché EN ENTIER (rien de coupé), ratio
   fixe du fichier (1536:561), centré verticalement dans .hero-visual.
   Taille pilotée par --hero-visual-scale (1 = pile la largeur du bloc,
   >1 = déborde vers la droite sur les arcs). Réglable à la main ici, ou
   en direct via le mode #place (curseur "Taille du visuel"). */
:root{--hero-visual-scale:1.50}
.hero-visual-wrap{position:absolute;z-index:2;left:-40%;top:36%;transform:translateY(-50%);width:calc(100% * var(--hero-visual-scale));aspect-ratio:1536/561}
.hero-visual-svg{display:block;width:100%;height:100%}

/* Animation arcs : les 3 cercles apparaissent l'un après l'autre du plus
   petit (intérieur) au plus grand (extérieur) — dans le nouveau fichier
   "Visuel HERO.svg", arc-seq-1/2/3 sont déjà assignés dans le HTML par
   taille réelle croissante, donc pas besoin de réassignement ici.
   Ils restent visibles ensemble un instant, disparaissent tous ensemble,
   pause, puis ça reboucle. Durée totale du cycle : --arc-seq-duration. */
:root{--arc-seq-duration:5s}
.arc-seq{opacity:0}
.arc-seq-1{animation:arc-slot-1 var(--arc-seq-duration) ease-in-out infinite}
.arc-seq-2{animation:arc-slot-2 var(--arc-seq-duration) ease-in-out infinite}
.arc-seq-3{animation:arc-slot-3 var(--arc-seq-duration) ease-in-out infinite}
@keyframes arc-slot-1{0%,4%{opacity:0}10%,66%{opacity:1}75%,100%{opacity:0}}
@keyframes arc-slot-2{0%,29%{opacity:0}35%,66%{opacity:1}75%,100%{opacity:0}}
@keyframes arc-slot-3{0%,54%{opacity:0}60%,66%{opacity:1}75%,100%{opacity:0}}

/* Points cliquables M/A/S — superposés aux 3 points roses déjà dessinés
   dans le SVG. Positions en % calculées depuis les coordonnées réelles
   des points dans le fichier (% stables puisqu'ils sont enfants de
   .hero-visual-wrap, qui garde toujours le même ratio).
   Taille en % (pas en px) = même taille que TOUS les points du visuel
   (mesurée : ~23 unités de viewBox sur 1536, identique aux points roses
   et bleu marine des arcs) ; aspect-ratio:1 garde le cercle parfait quel
   que soit --hero-visual-width. */
.mono-dot{position:absolute;z-index:5;width:1.5%;aspect-ratio:1;padding:0;transform:translate(-50%,-50%);border:1px solid var(--cream);border-radius:50%;background:var(--pink);cursor:pointer;transition:box-shadow .25s,transform .25s;-webkit-tap-highlight-color:transparent}
.mono-dot::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--pink);opacity:.55;pointer-events:none;animation:dot-invite 2.2s ease-in-out infinite}
.mono-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--pink);opacity:0;transition:opacity .25s}
.mono-dot:hover,.mono-dot:focus-visible{outline:none;transform:translate(-50%,-50%) scale(1.12)}
.mono-dot:hover::before,.mono-dot:focus-visible::before,.mono-dot.is-active::before{animation-play-state:paused;opacity:0}
.mono-dot:hover::after,.mono-dot.is-active::after{opacity:.7}
.mono-dot.is-active{animation:dot-pulse 1.8s ease-out infinite}
.dot-m{left:61.33%;top:31.33%}
.dot-a{left:61.33%;top:53.12%}
.dot-s{left:61.33%;top:79.11%}
@keyframes dot-pulse{0%{box-shadow:0 0 0 0 rgba(190,116,126,.55)}70%{box-shadow:0 0 0 16px rgba(190,116,126,0)}100%{box-shadow:0 0 0 0 rgba(190,116,126,0)}}
@keyframes dot-invite{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}

/* Notes : chacune apparaît (simple fondu, pas de glissement) juste À CÔTÉ
   de sa lettre, centrée verticalement sur le point correspondant. */
.hero-note{--nx:0px;--ny:0px;position:absolute;z-index:4;left:61.33%;margin-left:calc(16px + var(--note-gap));width:230px;padding:14px 17px;background:rgba(248,242,237,.94);backdrop-filter:blur(2px);border-left:2px solid var(--pink);box-shadow:0 14px 34px -18px rgba(8,29,58,.4);transform:translate(var(--nx),calc(-50% + var(--ny)));opacity:0;pointer-events:none;transition:opacity var(--note-appear-time) ease}
.hero-note.is-visible{opacity:1;pointer-events:auto}
/* Apparition au SURVOL (ou focus clavier) du point correspondant */
.dot-m:hover ~ .note-m,.dot-m:focus-visible ~ .note-m,
.dot-a:hover ~ .note-a,.dot-a:focus-visible ~ .note-a,
.dot-s:hover ~ .note-s,.dot-s:focus-visible ~ .note-s{opacity:1}
.hero-note strong{display:block;margin-bottom:7px;color:var(--pink);font-family:"Syne",Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em}
.hero-note span{font-size:13px;line-height:1.5;color:var(--text)}

/* TEST — note "nue" (sans cadre) + effet machine à écrire, sur M
   uniquement pour l'instant. La visibilité vient du TEXTE lui-même (vide
   au repos, rempli caractère par caractère en JS au survol) : plus besoin
   du fondu ni du fond/ombre/bordure de .hero-note — donc opacity:1 fixe
   et tout l'habillage "carte" désactivé. */
.hero-note--bare{opacity:1;background:none;backdrop-filter:none;border-left:0;box-shadow:none;padding:0;margin-left:0;transform:translateY(-50%)}
.hero-note--bare .type-text{font-size:13px;line-height:1.5;color:var(--text);font-family:"Arimo",Arial,sans-serif}
/* Chaque note "nue" est calée EXACTEMENT dans l'espace entre le point du
   monogramme et le point correspondant sur les arcs, sur la même ligne
   (left/width mesurés en % depuis les positions réelles des 2 points). */
.hero-note--bare.note-m{left:63.1%;width:17.6%}
.hero-note--bare.note-a{left:63.1%;width:19.6%}
.hero-note--bare.note-s{left:63.1%;width:29.7%}
.note-m{top:31.33%;--nx:var(--note-m-x);--ny:var(--note-m-y)}
.note-a{top:53.12%;--nx:var(--note-a-x);--ny:var(--note-a-y)}
.note-s{top:79.11%;--nx:var(--note-s-x);--ny:var(--note-s-y)}

/* ═══ Mode placement (page ouverte avec #place) ═══ */
.place-mode .hero-note{opacity:1!important;pointer-events:auto!important;cursor:grab;outline:1px dashed var(--pink);outline-offset:3px}
.place-mode .hero-note:active{cursor:grabbing}
.place-panel{position:fixed;right:16px;bottom:16px;z-index:9999;width:260px;padding:14px 16px;background:var(--cream);color:var(--text);border:1px solid var(--pink);box-shadow:0 20px 50px -20px rgba(8,29,58,.5);font:400 12px/1.5 "Arimo",Arial,sans-serif}
.place-panel h4{margin:0 0 8px;font-family:"Syne",Arial,sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.place-panel pre{margin:8px 0;padding:8px;background:#fff;border:1px solid var(--line);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;white-space:pre-wrap}
.place-panel button{margin:2px 4px 2px 0;padding:7px 10px;border:0;background:var(--pink);color:#fff;font:700 10px/1 "Arimo",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.place-panel button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}

/* ═══ Quand faire appel à M.A.S ═══ */
.needs{display:grid;grid-template-columns:40% 54%;gap:6%;background:var(--white)}
.needs .section-heading{margin:0}
.needs-list{list-style:none;margin:0;padding:0}
.needs-list li{display:grid;grid-template-columns:55px 1fr;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.needs-list li:last-child{border-bottom:1px solid var(--line)}
.needs-list span{color:var(--pink);font-size:10px}
.needs-list p{margin:0;font-family:"Syne",Arial,sans-serif;font-size:18px;line-height:1.35;letter-spacing:-.02em}

/* ═══ Bande de progression ═══ */
.performance-flow{min-height:100px;max-height:120px;margin:0 5vw;padding:14px clamp(40px,4vw,56px);display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:15px;background:var(--cream);font-family:"Arimo",Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--navy);text-transform:uppercase}
.performance-flow span{white-space:nowrap}
.performance-flow i{height:1px;background:rgba(190,116,126,.45);position:relative}
.performance-flow i:after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--pink);transform:translate(50%,-50%)}

/* ═══ Expertises ═══ */
.expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.expertise-grid article{min-height:300px;padding:35px 28px 35px 0;border-right:1px solid var(--line)}
.expertise-grid article+article{padding-left:28px}
.expertise-grid article:last-child{border-right:0}
.expertise-grid b{color:var(--pink);font-size:10px}
.expertise-grid h3{margin:42px 0 18px;font-size:24px;line-height:1.15;letter-spacing:-.035em}
.expertise-grid p,.formats article p,.mission-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

/* ═══ Modes d'intervention ═══ */
.formats{background:var(--navy);color:#fff;display:grid;grid-template-columns:42% 29% 29%;padding-top:90px;padding-bottom:90px}
.formats-intro{padding-right:7vw}
.formats h2{font-size:42px}
.formats article{padding:10px 35px;border-left:1px solid rgba(255,255,255,.2)}
.formats article>span{color:var(--pink);font-size:10px}
.formats h3{margin:42px 0 15px;font-size:25px;line-height:1.15}
.formats article p{color:#c8d0da}

/* ═══ Missions & collaborations ═══ */
.collaborations{background:var(--white)}
.mission-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mission-grid article{min-height:250px;padding:30px 24px;border-right:1px solid var(--line)}
.mission-grid article:last-child{border-right:0}
.partner-logo{display:block;height:36px;width:auto;max-width:120px;object-fit:contain;margin-bottom:22px}
.mission-grid h3{min-height:55px;margin:0 0 25px;color:var(--navy);font-size:18px;line-height:1.15}
.confidentiality{margin:20px 0 0;color:#737d8a;font-size:11px}

/* ═══ Méthode M.A.S ═══ */
.method{background:var(--navy);color:#fff}
.method-intro{display:grid;grid-template-columns:41% 52%;column-gap:7%;align-items:start}
.method-intro .eyebrow{grid-column:1/-1}
.method-intro h2{margin:0;font-size:46px;line-height:1.08;letter-spacing:-.04em}
.method-intro>p:last-child{margin:2px 0 0;color:#c8d0da;font-size:15px;line-height:1.75}
.method-body{display:grid;grid-template-columns:36% 58%;gap:6%;align-items:start;margin-top:70px}

/* Visuel interactif — repris tel quel du bloc « À propos » (mêmes anneaux,
   mêmes proportions 191/264/337px, même fichier officiel du monogramme,
   non redessiné). Les 3 anneaux reprennent leur animation d'apparition
   séquentielle d'origine (cercle 1, puis 2, puis 3 — mêmes keyframes
   arc-slot-1/2/3 que les arcs du hero) ; l'étape active se distingue en
   plus par sa couleur (bordure rose plus marquée), ce qui n'entre pas en
   conflit avec l'animation puisque celle-ci ne pilote que l'opacité. */
.method-visual{position:relative;min-height:520px}
.method-rings{position:absolute;left:50%;top:50%;width:430px;height:430px;transform:translate(-50%,-50%);pointer-events:none}
.method-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:2px solid rgba(190,116,126,.35);transform:translate(-50%,-50%);opacity:0;transition:border-color .38s ease,border-width .38s ease}
.method-ring-1{width:191px;height:191px;animation:arc-slot-1 var(--arc-seq-duration) ease-in-out infinite}
.method-ring-2{width:264px;height:264px;animation:arc-slot-2 var(--arc-seq-duration) ease-in-out infinite}
.method-ring-3{width:337px;height:337px;animation:arc-slot-3 var(--arc-seq-duration) ease-in-out infinite}
.method-visual[data-active-step="m"] .method-ring-1{border-color:var(--pink);border-width:2.5px}
.method-visual[data-active-step="a"] .method-ring-2{border-color:var(--pink);border-width:2.5px}
.method-visual[data-active-step="s"] .method-ring-3{border-color:var(--pink);border-width:2.5px}

/* Le monogramme garde son ratio d'origine (245:462, fichier officiel) sans
   déformation ni marge morte, pour que les 3 points cliquables ci-dessous
   (calculés depuis les coordonnées réelles des points dans le SVG) tombent
   pile sur les points roses déjà dessinés dans l'image. Pas de fond derrière
   : le monogramme lui-même est recoloré en ivoire (charte #F8F2ED) via un
   masque CSS reprenant le fichier officiel tel quel (même police, mêmes
   tracés, aucune retouche du fichier) pour rester visible sur le fond bleu
   nuit de la section Méthode. */
.method-mono-wrap{position:absolute;left:50%;top:50%;width:250px;transform:translate(-50%,-50%)}
.method-mono{width:250px;aspect-ratio:245/462;background:var(--cream);-webkit-mask-image:url("../img/mas-monogramme.svg");mask-image:url("../img/mas-monogramme.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.method-zone{position:absolute;left:0;width:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;z-index:3;-webkit-appearance:none;appearance:none}
.method-zone:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.zone-m{top:0;height:36.12%}
.zone-a{top:36.12%;height:29.02%}
.zone-s{top:65.14%;height:34.86%}
.method-point{position:absolute;z-index:4;width:16px;height:16px;margin:0;padding:0;border:1px solid var(--white);border-radius:50%;background:var(--pink);opacity:.5;cursor:pointer;transform:translate(-50%,-50%);transition:opacity .38s ease,box-shadow .38s ease,transform .38s ease;-webkit-appearance:none;appearance:none}
/* Halo qui respire en continu autour de chaque point, pour inviter au
   survol (même principe que les points du monogramme dans le hero). */
.method-point::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--pink);opacity:.55;pointer-events:none;animation:dot-invite 2.2s ease-in-out infinite}
.method-point:hover::before,.method-point:focus-visible::before{animation-play-state:paused;opacity:0}
.method-point::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--pink);opacity:0;transition:opacity .38s ease}
.point-m{left:81.65%;top:22.89%}
.point-a{left:81.65%;top:49.35%}
.point-s{left:81.65%;top:80.92%}
.method-visual[data-active-step="m"] .point-m,
.method-visual[data-active-step="a"] .point-a,
.method-visual[data-active-step="s"] .point-s{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
.method-visual[data-active-step="m"] .point-m::after,
.method-visual[data-active-step="a"] .point-a::after,
.method-visual[data-active-step="s"] .point-s::after{opacity:.65}

.method-cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.method-cards article{scroll-margin-top:120px;min-height:350px;padding:35px 34px;border-right:1px solid rgba(255,255,255,.2);cursor:pointer;transition:opacity .38s ease}
.method-cards article:last-child{border-right:0}
.method-cards article:not(.is-active){opacity:.55}
.method-cards article.is-active h3{color:var(--pink)}
.method-cards article:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}
.method-cards span{display:block;color:var(--pink);font-family:"Syne",Arial,sans-serif;font-size:54px;line-height:1}
.method-cards h3{margin:38px 0 18px;font-size:24px;line-height:1.15;transition:color .38s ease}
.method-cards p{margin:0;color:#c8d0da;font-size:14px;line-height:1.65}
.method-cards .method-dev{margin-top:14px;color:#9fadbd;font-size:13px}
.method-cards small{display:block;margin-top:26px;color:var(--pink);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.method-summary{max-width:850px;margin:38px 0 0;padding-left:20px;border-left:2px solid var(--pink);font-family:"Syne",Arial,sans-serif;font-size:18px;line-height:1.5;font-weight:700}
@media(prefers-reduced-motion:reduce){
  .method-ring,.method-point,.method-point::after,.method-cards article,.method-cards h3{transition:none}
  .method-ring-1,.method-ring-2,.method-ring-3{animation:none;opacity:.35}
  .method-point::before{animation:none;opacity:.4}
}

/* ═══ À propos ═══ */
.about{display:grid;grid-template-columns:38% 54%;gap:8%;align-items:center;background:var(--white)}
.about-signature{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center}
/* Photo officielle d'Anne-Gaëlle Aurélie (le visuel animé M.A.S a été
   déplacé vers la section « La méthode M.A.S », devenu interactif). */
.about-photo{width:320px;height:440px;object-fit:cover;object-position:top center;border-radius:4px}
.about-copy>p:not(.eyebrow):not(.past){color:#4e5a69;font-size:15px;line-height:1.75}
.credentials{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0}
.credentials span{padding:10px 13px;border:1px solid var(--line);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.past{padding-left:18px;border-left:2px solid var(--pink);font-size:15px;line-height:1.65}

/* ═══ Contact (bande d'appel) ═══ */
.contact{text-align:center;padding:90px 20px;background:#eee4dc}
.contact h2{font-size:50px}
.contact>p:not(.eyebrow){max-width:650px;margin:18px auto 28px;color:var(--muted);line-height:1.7}

/* ═══ Pied de page — Nous contacter ═══ */
.site-footer{background:#061830;color:#fff}
.footer-inner{max-width:1180px;margin:0 auto;padding:16px 5vw 10px}
.footer-contact{display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Logo officiel affiché dans ses vraies couleurs (charte), sur une plaque
   ivoire pour rester lisible sur le fond bleu nuit du pied de page. */
.footer-logo-wrap{flex:0 0 auto;display:inline-block;padding:10px 14px;background:var(--cream);border-radius:4px}
.footer-logo{display:block;width:110px}
.footer-contact h2{margin:0 0 4px;font-size:16px;letter-spacing:-.03em}
.footer-lead{margin:0 0 6px;color:#b9c2ce;font-size:12px;line-height:1.4;max-width:360px}
.footer-coords{list-style:none;margin:0;padding:0;max-width:420px}
.footer-coords li{padding:4px 0;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:#dfe4ea}
.footer-coords li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.footer-coords span{display:block;margin-bottom:4px;color:var(--pink);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.footer-coords a:hover{color:var(--pink)}


.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:8px 5vw;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;font-size:11px;color:#8b95a1}
.footer-bottom nav{display:flex;gap:26px}
.footer-bottom a:hover{color:var(--pink)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1050px){
  .hero{grid-template-columns:50% 50%}
  .hero h1{font-size:47px}
  .hero-note{width:200px}
  .expertise-grid{grid-template-columns:1fr 1fr}
  .expertise-grid article:nth-child(2){border-right:0}
  .mission-grid{grid-template-columns:repeat(3,1fr)}
  .mission-grid article:nth-child(3){border-right:0}
  .mission-grid article:nth-child(-n+3){border-bottom:1px solid var(--line)}
}

@media(max-width:800px){
  .site-header{height:82px}
  .site-header nav,.button-small{display:none}
  .hero{grid-template-columns:1fr;padding:55px 28px 20px}
  .hero-copy{padding:0}
  .hero-visual{height:500px;max-width:650px;width:100%;margin:auto}
  .needs,.about{grid-template-columns:1fr}
  .needs .section-heading{margin-bottom:50px}
  .method-intro{grid-template-columns:1fr}
  .method-intro h2{margin-bottom:25px}
  /* Sur tablette/mobile : le visuel passe AU-DESSUS des 3 étapes (au lieu
     d'une colonne à gauche), à taille réduite mais monogramme entièrement
     visible ; l'interaction reste au clic (pas de survol tactile). */
  .method-body{grid-template-columns:1fr;gap:40px}
  .method-visual{min-height:340px}
  .method-rings{width:300px;height:300px}
  .method-ring-1{width:133px;height:133px}
  .method-ring-2{width:184px;height:184px}
  .method-ring-3{width:235px;height:235px}
  .method-mono-wrap{width:175px}
  .method-mono{width:175px}
  .method-cards{grid-template-columns:1fr}
  .method-cards article{min-height:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}
  .method-cards article:last-child{border-bottom:0}
  .formats{grid-template-columns:1fr 1fr}
  .formats-intro{grid-column:1/-1;margin-bottom:50px}
  .about-signature{min-height:auto;margin-bottom:36px}
  .about-photo{width:100%;max-width:320px;height:auto;aspect-ratio:604/900}
  .mission-grid{grid-template-columns:1fr 1fr}
  .mission-grid article,.mission-grid article:nth-child(3){border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .mission-grid article:nth-child(even){border-right:0}
}

@media(max-width:560px){
  .site-header{padding:0 20px}
  .header-logo{width:55px}
  .hero{padding:45px 20px 10px}
  .hero h1{font-size:38px}
  .hero-actions{align-items:flex-start;flex-direction:column}
  /* En dessous de 560px, le cadrage "bleed" du desktop (arcs qui débordent
     volontairement à droite) devient trop juste : la fenêtre visible finit
     par couper les arcs pile à l'endroit où le petit trait + point qui les
     relie au monogramme restent visibles seuls, sans le cercle auquel ils
     se raccrochent (points/traits orphelins). On resserre donc le cadrage
     sur le seul monogramme — élément essentiel et interactif — recentré
     avec top:50% dans une hauteur de bloc adaptée à ce cadrage plus serré. */
  :root{--hero-visual-scale:3.07}
  .hero-visual-wrap{left:-130%;top:50%}
  .hero-visual{height:410px}
  /* mobile : trop étroit pour "à côté" → la note se cale sur la droite */
  .hero-note{left:auto;right:0;margin-left:0;width:60%;padding:12px 14px}
  .hero-note strong{font-size:11px}
  .hero-note span{font-size:12px}
  /* Les notes "nues" (bare) sont positionnées en % de .hero-visual-wrap,
     qui est maintenant volontairement agrandi ×3,07 pour le cadrage serré
     du monogramme ci-dessus : leurs % d'origine (calés sur le wrap
     "normal" du desktop) déborderaient largement hors de l'écran. On les
     repositionne donc ici pour retomber, une fois déformés par ce même
     ×3,07, entre environ 8 % et 92 % de la largeur RÉELLEMENT visible. */
  .hero-note--bare.note-m,
  .hero-note--bare.note-a,
  .hero-note--bare.note-s{left:62.5%;width:11%}
  .section{padding:72px 20px}
  .section-heading h2,.formats h2,.about h2,.contact h2,.method-intro h2{font-size:34px}
  .contact h2{font-size:34px}
  .needs-list p{font-size:15px}
  /* Sur très petit écran, la frise passe en liste verticale plutôt que de
     masquer un intitulé : les 4 étapes restent toutes visibles. */
  .performance-flow{grid-template-columns:1fr;gap:14px;padding:22px 20px;min-height:auto;max-height:none;font-size:11px}
  .performance-flow span{white-space:normal}
  .performance-flow i{display:none}
  .expertise-grid,.formats,.mission-grid{grid-template-columns:1fr}
  .expertise-grid article,.expertise-grid article+article,.mission-grid article,.mission-grid article:nth-child(3),.formats article{min-height:auto;padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}
  .formats article{border-color:rgba(255,255,255,.2)}
  .expertise-grid h3,.formats h3{margin-top:25px}
  .method{padding:72px 20px}
  .method-body{margin-top:45px;gap:28px}
  .method-visual{min-height:250px}
  .method-rings{width:220px;height:220px}
  .method-ring-1{width:98px;height:98px}
  .method-ring-2{width:135px;height:135px}
  .method-ring-3{width:172px;height:172px}
  .method-mono-wrap{width:130px}
  .method-mono{width:130px}
  .method-cards article{padding:28px 0}
  .method-summary{font-size:16px}
  .contact{padding:72px 20px}
  .footer-inner{padding:16px 20px 10px}
  .footer-contact{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-bottom{flex-direction:column;gap:14px;text-align:center;padding:24px 20px}
  .legal{padding:60px 20px 70px}
  .legal h1{font-size:30px}
}

/* ═══ Pages légales (mentions légales / politique de confidentialité) ═══ */
.legal{max-width:820px;margin:0 auto;padding:90px 5vw 100px}
.legal h1{margin:0 0 8px;font-size:40px;line-height:1.1;letter-spacing:-.03em}
.legal .legal-updated{margin:0 0 50px;color:var(--muted);font-size:13px}
.legal h2{margin:46px 0 14px;font-size:22px;letter-spacing:-.02em}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 14px;color:#4e5a69;font-size:15px;line-height:1.75}
.legal ul{margin:0 0 14px;padding-left:20px;color:#4e5a69;font-size:15px;line-height:1.8}
.legal li{margin-bottom:4px}
.legal strong{color:var(--text)}
.legal .todo{display:inline;background:rgba(190,116,126,.12);color:#9a4d59;padding:1px 7px;border-radius:3px;font-weight:600;font-size:13px}
.legal a{color:var(--pink)}
.legal a:hover{text-decoration:underline}