/* ════════════════════════════════════════════════════════════════════════
   RefitCraft : couche de marque et couche page, par-dessus le design
   system Broadsheet (assets/css/broadsheet.css, vendu tel quel).

   Fidele a la maquette de reference « RefitCraft Landing (standalone) » :
   papier blanc, aucune boite, aucun filet, la hierarchie tenue par
   l'echelle du serif et par le blanc. La seule couleur qui structure est
   le navy ; la route et ses amers sont le seul decor.

   Palette, de design_system/design_system.md :
     Deep Navy   #06345E  : titres, texte, navigation, boutons primaires   (20 %)
     Marine Blue #55A6C8  : route parcourue, liens survoles, rose, filets   (7 %)
     Sun Yellow  #FFC347  : surlignage du titre, amers franchis             (3 %)
     White       #FFFFFF  : fond                                          (70 %)
   Aucune valeur brute ne doit apparaitre hors du bloc :root.
   ════════════════════════════════════════════════════════════════════════ */

/* Source Serif 4, servie en local : pas de tiers, pas de fuite d'IP.
     Sous-ensembles latin et latin-ext : tout ce que le francais demande. */
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('../fonts/source-serif-4-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('../fonts/source-serif-4-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Remappage des roles du design system sur la palette RefitCraft. */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #06345E;
  --color-border: rgba(6, 52, 94, .18);
  --color-divider: rgba(6, 52, 94, .18);

  --color-accent: #06345E;
  --color-accent-100: #e7eef5;
  --color-accent-200: #c8d8e6;
  --color-accent-300: #9dbdd4;
  --color-accent-400: #55A6C8;
  --color-accent-500: #06345E;
  --color-accent-600: #1d5b85;
  --color-accent-700: #04213c;
  --color-accent-800: #03182c;
  --color-accent-900: #03182c;

  --color-accent-2: #FFC347;
  --color-accent-2-100: #fff3da;
  --color-accent-2-200: #ffe4ad;
  --color-accent-2-700: #8a6200;

  --color-neutral-100: #f2f6f9;
  --color-neutral-200: #e0e9f0;
  --color-neutral-300: #c3d6e2;
  --color-neutral-400: #8fb7cb;
  --color-neutral-500: #55A6C8;
  --color-neutral-600: #1d5b85;
  --color-neutral-700: #06345E;
  --color-neutral-800: #052a4c;
  --color-neutral-900: #03182c;

  /* Alias lisibles, partages avec refitcraft.js. */
  --ink: #06345E;
  --sea: #55A6C8;
  --gold: #FFC347;
  --paper: #ffffff;
  --ink-mid: #1d5b85;     /* navy eclairci : chiffres d'escale, valeurs (7:1 sur blanc) */
  --quiet: color-mix(in srgb, var(--ink) 72%, transparent);   /* 5.1:1 sur blanc */

  /* Un interligne unique gouverne tout le rythme vertical. */
  --leading: 28px;
  --half: 14px;
  --measure: 1200px;
  --gutter: 130px;        /* la marge ou navigue le bateau */
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  text-wrap: pretty;
  overflow-x: hidden;
}
a { color: var(--ink); text-underline-offset: 3px; }
/* Le survol ne doit jamais rendre le lien moins lisible : #55A6C8 mesure
   2,74:1 sur blanc. --ink-mid (#1d5b85) mesure 7,27:1. */
a:hover { color: var(--ink-mid); text-decoration: underline; }

.btn { white-space: nowrap; }
/* .nav a { color: inherit } du DS bat .btn-primary en specificite : le CTA de
   la barre de navigation doit donc etre nomme explicitement. */
.btn-primary, .rc-nav a.btn-primary { color: var(--paper); }

/* Lien d'evitement : premier arret du clavier. */
.rc-skip {
  position: absolute; left: var(--half); top: -60px; z-index: 40;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: var(--radius-md); text-decoration: none;
  font-family: var(--font-heading); font-size: 14px; transition: top .18s ease;
}
.rc-skip:focus { top: var(--half); color: var(--paper); }

/* ── La feuille : la route court au fond, le contenu flotte dessus ── */
.rc-sheet { position: relative; background: var(--paper); overflow: hidden; }
.rc-route {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
}
.rc-boat {
  position: absolute; top: 0; left: 0; z-index: 2;
  pointer-events: none; will-change: transform;
  /* Tant que le script ne l'a pas place sur la route, la coque serait echouee
     en haut a gauche : elle n'apparait qu'une fois positionnee. */
  visibility: hidden;
}
.rc-boat-bob { animation: rc-bob 4.6s ease-in-out infinite; transform-origin: 50% 78%; }
/* Le virement dure une demi-seconde : l'echelle horizontale passe par zero,
   la coque se raccourcit puis se redeploie dans l'autre sens. La classe est
   posee par refitcraft.js apres le premier placement, pour que le rendu
   initial n'anime rien. */
.rc-sailing .rc-boat-art { transition: transform .55s cubic-bezier(.45,.05,.35,1); }
.rc-boat-art {
  width: 104px; height: 113px;
  background-image: url('../img/boat.png');
  background-repeat: no-repeat; background-size: contain; background-position: center bottom;
}

.rc-wrap {
  position: relative; z-index: 1;
  max-width: var(--measure); margin: 0 auto;
  padding: 0 var(--gutter);
}

@keyframes rc-bob   { 0%,100% { transform: translateY(0) rotate(-2.2deg) } 50% { transform: translateY(-7px) rotate(2.2deg) } }
@keyframes rc-swell { 0%,100% { transform: translateY(0) }                 50% { transform: translateY(-4px) } }

/* ── Navigation ── */
.rc-nav { padding-inline: 0; gap: 24px; padding-block: 22px; flex-wrap: wrap; }
.rc-nav-brand { margin-right: auto; text-decoration: none; display: block; }
.rc-nav-brand img { height: 68px; width: auto; }
.rc-nav-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rc-nav-links a {
  font-family: var(--font-heading); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.rc-nav-links a[aria-current="true"] { color: var(--sea); }
.rc-nav a.btn-primary { text-decoration: none; }

/* ── Titres et texte courant ── */
.rc-kicker {
  display: block; font-family: var(--font-heading);
  font-size: 13px; line-height: var(--half);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--quiet); margin: 0 0 var(--half);
}
.rc-h1 {
  font-size: clamp(44px, 6.4vw, 86px); line-height: 1.07;
  letter-spacing: -0.02em; margin: 0 0 0 -0.035em; color: var(--ink);
}
.rc-h1 span { display: block; }
.rc-h1 .rc-mark { position: relative; width: fit-content; }
.rc-h1 .rc-mark::after {           /* le surlignage Sun Yellow, sous le texte */
  content: ""; position: absolute; left: 0; right: -6px; bottom: 0.04em;
  height: 0.09em; background: var(--gold); border-radius: 99px; z-index: -1;
}
.rc-lede  { font-size: 18px; line-height: var(--leading); max-width: 56ch; margin: calc(1.5 * var(--leading)) 0 0; }
.rc-body  { font-size: 16px; line-height: var(--leading); max-width: 52ch; margin: var(--leading) 0 0; }
.rc-sign  { font-size: 14px; line-height: var(--leading); margin: var(--half) 0 0; color: var(--quiet); font-style: italic; }
.rc-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.rc-actions .btn { min-height: 44px; padding-inline: 20px; text-decoration: none; }

/* ── Sections : separees par du blanc, jamais par un filet ── */
.rc-hero { padding: calc(3 * var(--leading)) 0 calc(2 * var(--leading)); max-width: 760px; }

/* ── A propos ── */
.rc-about {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 52px); align-items: center;
  padding-block: calc(4 * var(--leading));
}
.rc-portrait {
  width: 184px; height: 184px; border-radius: 50%; overflow: hidden;
  background: var(--color-neutral-100); flex: none;
}
.rc-portrait img { width: 100%; height: 100%; object-fit: cover; }
.rc-about h2 { font-size: 34px; line-height: 1.14; margin: 0; max-width: 20ch; }

/* ── Services : cinq escales ── */
.rc-services { padding: calc(4 * var(--leading)) 0 calc(2 * var(--leading)); }
.rc-services > .rc-kicker { margin-bottom: calc(2 * var(--leading)); }
.rc-escale {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--leading); align-items: start;
  margin-bottom: calc(4 * var(--leading));
}
.rc-escale-num {
  display: block; font-family: var(--font-heading);
  font-size: clamp(56px, 7vw, 92px); line-height: .9;
  color: var(--ink-mid); letter-spacing: -0.02em;
}
.rc-escale h3 { font-size: 32px; line-height: 1.15; margin: var(--half) 0 0; max-width: 14ch; }
.rc-escale p {
  font-size: 16px; line-height: var(--leading); margin: 0; max-width: 46ch;
}

/* ── Vues de chantier ──
   Deux cliches cote a cote pour un avant / apres, un seul quand la comparaison
   n'apporte rien. Le traitement .halftone vient du design system, sa trame en
   moins (voir plus bas). */
.rc-shots {
  grid-column: 1 / -1;          /* les cliches traversent les deux colonnes :
                                   plus grands, et aucune colonne ne reste vide */
  display: grid; grid-template-columns: repeat(var(--shots, 2), minmax(0, 1fr));
  gap: var(--leading); margin-top: calc(1.5 * var(--leading));
  max-width: 66%;                /* deux cliches ; voir les variantes plus bas */
}
/* Les cliches sont tous au meme format, et un cliche doit garder la meme taille
   d'un bout a l'autre de la page : c'est donc la largeur du bloc qui suit leur
   nombre, pas la taille des images qui suit la largeur du bloc. */
.rc-shots-trois  { --shots: 3; max-width: 100%; }
.rc-shots-single { --shots: 1; max-width: 33%; }
.rc-shot { margin: 0; }
.rc-shot > .rc-shot-frame {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-neutral-100);
}
/* La trame de presse de .halftone est ecartee ici. Sur ces cliches elle pose un
   grain qui brouille justement ce qu'ils doivent prouver : un ROS lisible a
   l'ecran, une carene fraichement peinte. Le leger desature et le contraste du
   design system sont gardes, eux : ce sont eux qui accordent les photos au
   reste de la page. Pour retrouver la trame, supprimer cette regle. */
.rc-shot-frame.halftone::after { display: none; }
.rc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-shot figcaption {
  margin-top: 7px; font-family: var(--font-heading);
  font-size: 11px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
  color: var(--quiet);
}
/* L'etat « apres » est le resultat : il porte la seule touche de jaune. */
.rc-shot-apres figcaption { color: var(--ink); }
.rc-shot-apres figcaption::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--gold); vertical-align: 0.1em;
}


/* La limite du perimetre, dite franchement en fin de section : ni moteur ni
   greement. Ce n'est pas un service, donc ni chiffre ni titre, juste une ligne
   posee a la fin du parcours. */
.rc-hors-cap {
  font-size: 16px; line-height: var(--leading); max-width: 52ch;
  margin: calc(2 * var(--leading)) 0 0; color: var(--quiet);
}

/* ── Zone d'intervention ── */
.rc-zone {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--leading) clamp(28px, 6vw, 90px); align-items: center;
  padding-block: calc(4 * var(--leading));
}
.rc-zone h2 { font-size: 38px; line-height: 1.12; margin: 0; }
.rc-legs { display: flex; flex-direction: column; gap: 6px; margin-top: var(--leading); max-width: 44ch; }
.rc-leg { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 16px; line-height: var(--leading); }
.rc-leg-fill {
  flex: 1; min-width: 24px; align-self: flex-end; margin-bottom: .34em;
  border-bottom: 1px dotted color-mix(in srgb, var(--sea) 80%, transparent);
}
.rc-leg-nm { font-family: var(--font-heading); }
.rc-leg-home .rc-leg-nm { color: var(--ink-mid); }
/* La rose des vents lisait comme un curseur et occupait 300 px pour du pur
   decor. Le trace reel de la cote, avec les cinq ports pointes, dit la meme
   chose en etant vrai, et il double la liste de distances qu'il accompagne. */
.rc-chart-holder { display: flex; justify-content: center; }
.rc-coast { width: 100%; max-width: 440px; height: auto; }

/* ── Contact ── */
.rc-contact { padding-block: calc(4 * var(--leading)); }
.rc-contact h2 { font-size: 38px; line-height: 1.12; margin: 0; max-width: 18ch; }
/* Les coordonnees remplacent le formulaire. Pas de boite, pas de filet : la
   hierarchie vient de l'echelle. Le telephone passe devant, parce qu'un
   plaisancier bloque la veille d'une sortie appelle, il n'ecrit pas. */
.rc-coord { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: calc(1.5 * var(--leading)); }
.rc-coord-tel {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.1;
  letter-spacing: -0.01em; text-decoration: none;
}
.rc-coord-tel:hover { color: var(--ink-mid); text-decoration: underline; }
.rc-coord-mail {
  font-family: var(--font-heading); font-size: clamp(19px, 2.3vw, 24px); line-height: 1.2;
}
.rc-coord-lieu {
  font-size: 16px; line-height: var(--leading); max-width: 46ch;
  margin: var(--half) 0 0; color: var(--quiet);
}

/* ── Pied de page ──
   La page s'eteignait en 13 px de gris. Elle se termine maintenant sur la seule
   surface sombre du site : le logo en blanc, le telephone en grand, le delai de
   reponse. C'est le dernier regard et le dernier rappel d'action. */
.rc-outro {
  background: var(--ink); color: var(--paper);
  padding-block: calc(3 * var(--leading));
}
.rc-outro .rc-wrap { z-index: 3; }
.rc-outro-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(1.5 * var(--leading)) clamp(28px, 6vw, 80px); align-items: end;
}
.rc-outro img { height: 92px; width: auto; }
.rc-outro-lines { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.rc-outro-tel {
  font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2; color: var(--paper); text-decoration: none;
}
.rc-outro-tel:hover { color: var(--gold); text-decoration: underline; }
.rc-outro-mail { font-size: 16px; color: var(--paper); }
.rc-outro-mail:hover { color: var(--gold); }
.rc-outro :focus-visible { outline-color: var(--gold); }

.rc-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--half) var(--leading); margin-top: calc(2.5 * var(--leading));
  padding-top: var(--leading);
  border-top: 1px solid color-mix(in srgb, var(--paper) 26%, transparent);
  font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--paper) 72%, transparent);
}
.rc-legal a { color: inherit; }
.rc-legal a:hover { color: var(--gold); }

/* ── Apparitions au defilement ── */
/* L'etat masque est conditionne a .rc-js, pose par un script inline dans le
   <head>. Sans JavaScript la classe n'existe pas, donc rien n'est masque et la
   page reste entierement lisible : c'est le mode de panne qui compte pour un
   site dont la seule fonction est de faire entrer des demandes. */
.rc-js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  /* Filet de securite sans JavaScript : si refitcraft.js ne se charge pas ou
     echoue, .rc-in n'arrive jamais et le contenu resterait invisible. Cette
     animation le revele d'office au bout de 2,5 s, sans aucun script. */
  animation: rc-failsafe 0s linear 2.5s forwards;
}
@keyframes rc-failsafe { to { opacity: 1; transform: none; } }
.rc-js.rc-ready [data-reveal] {
  transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1);
}
.rc-js [data-reveal].rc-in { opacity: 1; transform: none; }

/* ── Etroit ──
   La gouttiere est le couloir de navigation : refitcraft.js y cale l'echelle
   de la coque. 44 px est le minimum ou le bateau tient dans la marge sans
   passer sur le texte (la maquette, a 34 px, le laissait mordre la colonne). */
@media (max-width: 760px) {
  :root { --gutter: 44px; }
  .rc-shots, .rc-shots-trois, .rc-shots-single {
    grid-template-columns: 1fr; gap: var(--leading); max-width: none;
  }
  .rc-outro-grid { grid-template-columns: 1fr; align-items: start; }
  .rc-outro-lines { text-align: left; }
  .rc-outro img { height: 72px; }
  .rc-nav-brand img { height: 64px; }
  .rc-escale { grid-template-columns: 1fr; gap: var(--half); margin-bottom: calc(5 * var(--leading)); }
  .rc-zone { grid-template-columns: 1fr; }
  .rc-zone .rc-rose-holder { order: -1; }
  .rc-about { grid-template-columns: 1fr; justify-items: start; }
}

/* ── Mouvement reduit : plus rien ne bouge tout seul ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rc-js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── Impression : la feuille redevient du papier ── */
@media print {
  .rc-route, .rc-boat, .rc-nav .btn, .rc-skip { display: none !important; }
  .rc-outro { background: none; color: var(--ink); }
  .rc-outro img { filter: invert(1); }
  .rc-outro-tel, .rc-outro-mail, .rc-legal, .rc-legal a { color: var(--ink); }
  .rc-legal { border-top-color: var(--color-divider); }
  .rc-sheet { overflow: visible; }
  .rc-about, .rc-zone, .rc-contact, .rc-services { padding-block: var(--leading); }
  .rc-escale { margin-bottom: var(--leading); break-inside: avoid; }
  .rc-js [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}