/* ==========================================================================
   Thème Deffiperf — feuille unique, aucune ressource externe.
   Palette maritime tirée du logo : coque bleu marine, voiles bleu clair,
   accent orange de signalisation. Typographie à empattements pour les titres.
   ========================================================================== */

:root {
  /* Jetons de couleur */
  --ink:         #10233a;
  --ink-soft:    #46617d;
  --navy:        #102943;
  --navy-deep:   #0b1c2f;
  --blue:        #2b5fa7;
  --blue-dark:   #1f4880;
  --blue-bright: #3a9fd8;
  --sky:         #e9f2fa;
  --sand:        #f6f3ec;
  --signal:      #fe5722;  /* orange de la marque, releve sur les icones du site */
  --signal-ink:  #c8390f;  /* meme teinte assombrie, pour le texte sur fond clair */
  --signal-dark: #e04512;  /* survol des surfaces orange */
  --paper:       #f8fafc;
  --line:        #dbe4ee;
  --white:       #ffffff;

  /* Typographie */
  --font-heading-stack: var(--font-heading, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif);
  --font-body-stack:    var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);

  /* Mesures */
  --wrap:        1160px;
  --measure:     1000px;  /* colonne de lecture */
  --measure-form: 720px;  /* un formulaire n'a pas besoin de la meme largeur */
  --radius:      14px;
  --radius-lg:   20px;
  --shadow-sm:   0 1px 2px rgba(16, 41, 67, .06), 0 8px 20px -14px rgba(16, 41, 67, .32);
  --shadow-md:   0 2px 4px rgba(16, 41, 67, .06), 0 22px 40px -24px rgba(16, 41, 67, .42);

  --header-bg:      #102943;
  --footer-bg:      #0b1c2f;
  --header-height:  78px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body-stack);
  font-size: 20px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-locked { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading-stack);
  color: var(--navy);
  line-height: 1.22;
  font-weight: 700;
  margin: 0 0 .6em;
  letter-spacing: -.005em;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--signal); color: #fff; padding: .7rem 1.2rem;
  font-weight: 700; text-decoration: none; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ── Barre de contact ──────────────────────────────────────────────────── */

.topbar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .82);
  font-size: .86rem;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 40px; flex-wrap: wrap;
}
.topbar-text { letter-spacing: .01em; }
.topbar-contact { display: flex; gap: 1.4rem; margin-left: auto; }
.tb-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #fff; text-decoration: none; font-weight: 600;
  transition: color .18s ease;
}
.tb-link:hover { color: var(--blue-bright); }
.tb-link svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }

/* ── En-tête ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 1200;
  background: var(--header-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px -22px rgba(0, 0, 0, .9);
}
.header-inner {
  display: flex; align-items: center; gap: 1.1rem;
  min-height: var(--header-height);
}
.brand { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; flex: 0 0 auto; }
.brand-logo { height: 46px; width: auto; }
.brand-tagline {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.hull-line {
  height: 3px;
  background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 38%, var(--blue-bright) 72%, var(--signal) 100%);
}

/* Bouton de menu mobile : traits blancs pleins, plus epais et plus larges que
   la valeur par defaut, sur un fond legerement eclairci. A 2 px sur fond bleu
   nuit, les traits se lisaient mal en plein soleil. */
.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 12px 9px;
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 11px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .7);
}
.nav-toggle span {
  display: block; width: 100%; height: 3px;
  background: #fff; border-radius: 3px;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: .8rem; min-width: 0; }
.nav-list { list-style: none; display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; }
.nav-list li { position: relative; }
.nav-list > li > a {
  display: block; padding: .62rem .72rem; border-radius: 9px;
  white-space: nowrap;
  color: rgba(255, 255, 255, .93); text-decoration: none;
  font-size: .93rem; font-weight: 600; line-height: 1.3;
  transition: background .18s ease, color .18s ease;
}
.nav-list > li > a:hover,
.nav-list > li.is-active > a { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-list > li.is-active > a { box-shadow: inset 0 -2px 0 var(--blue-bright); }

/* Appel a l'action du menu : bordure et texte a l'orange de la marque, en
   pastille, pour se detacher des autres entrees. L'orange #fe5722 sur le bleu
   de l'en-tete donne 4,65 de contraste, il passe donc en texte courant.
   Au survol la pastille se remplit et le texte passe au bleu marine, qui offre
   le meme rapport sur l'orange : le blanc, lui, serait tombe a 3,18. */
.nav-list > li.is-cta { margin-left: .4rem; }
.nav-list > li.is-cta > a {
  color: var(--signal);
  background: rgba(254, 87, 34, .13);
  border: 2px solid var(--signal);
  border-radius: 22px;
  padding: .48rem 1.15rem;
  font-weight: 700; letter-spacing: .01em;
  box-shadow: none;
  transition: background .18s ease, color .18s ease, transform .18s ease,
              box-shadow .18s ease;
}
.nav-list > li.is-cta > a:hover,
.nav-list > li.is-cta > a:focus-visible {
  background: var(--signal); color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(254, 87, 34, .8);
}
.nav-list > li.is-cta.is-active > a {
  background: var(--signal); color: var(--navy); box-shadow: none;
}

.sub-toggle { display: none; }

.sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 268px;
  list-style: none; margin: 0; padding: .4rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 40;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-menu li a {
  display: block; padding: .5rem .7rem; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: .89rem; line-height: 1.4;
  transition: background .15s ease, color .15s ease;
}
.sub-menu li a:hover { background: var(--sky); color: var(--blue-dark); }
.sub-menu .sub-menu { top: -.4rem; left: 100%; }

/* Recherche : input et bouton dans une seule forme arrondie, sans double
   bordure ni difference de hauteur. Le bouton reprend l'orange de la marque,
   comme sur le site WordPress d'origine. */
.nav-search {
  display: flex; align-items: stretch; height: 40px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 22px; overflow: hidden;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav-search:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .4); }
.nav-search:focus-within {
  background: rgba(255, 255, 255, .16);
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(254, 87, 34, .28);
}
.nav-search input {
  width: 132px; min-width: 0; padding: 0 .35rem 0 1rem;
  font: inherit; font-size: .88rem; line-height: 1;
  color: #fff; background: transparent; border: 0;
  transition: width .22s cubic-bezier(.3, .7, .3, 1);
}
.nav-search input::placeholder { color: rgba(255, 255, 255, .62); }
.nav-search input:focus { width: 196px; outline: none; }
.nav-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.nav-search button {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 44px; padding: 0; cursor: pointer;
  background: var(--signal); border: 0; color: #fff;
  transition: background .18s ease;
}
.nav-search button:hover, .nav-search button:focus-visible { background: var(--signal-dark); }
.nav-search button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.nav-search button svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2.3; stroke-linecap: round;
}

.nav-scrim {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(11, 28, 47, .55); backdrop-filter: blur(2px);
}

/* ── Fil d'Ariane ──────────────────────────────────────────────────────── */

.breadcrumb-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-size: .84rem;
}
.breadcrumb-bar .wrap { padding: .7rem 0; }
.breadcrumb-bar a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--blue-dark); text-decoration: underline; }
.breadcrumb-bar ol, .breadcrumb-bar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

/* ── Héros de l'accueil ────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 15% 0%, #1b3f66 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color: #fff;
  padding: clamp(3.2rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 7rem);
}
.hero-inner { position: relative; z-index: 3; }
.hero-text { max-width: 46rem; }

/* Photo de fond : <img> en couverture plutot que background-image, pour
   garder l'alt et laisser le prechargeur du navigateur la recuperer tot. */
.hero-kicker {
  margin: 0 0 .9rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--blue-bright);
}
.hero h1 {
  margin: 0 0 1rem; color: #fff;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.1;
  max-width: none;
}
.hero-lead {
  margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.28rem); line-height: 1.6;
  color: rgba(255, 255, 255, .9); max-width: 60ch;
}

.hero-photo { padding-block: clamp(4rem, 10vw, 8rem); }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; }
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(103deg, rgba(8, 22, 38, .93) 0%, rgba(10, 28, 47, .88) 42%,
                    rgba(12, 33, 55, .74) 70%, rgba(12, 33, 55, .62) 100%),
    linear-gradient(to bottom, rgba(8, 22, 38, .55) 0%, rgba(8, 22, 38, .12) 38%,
                    rgba(8, 22, 38, .62) 100%);
}
/* Avec la photo, la houle decorative devient un artefact : la mer est deja
   dans l'image. On la masque et on garde la respiration du liseré bas. */
.hero-photo .hero-sea { display: none; }

.hero-photo .hero-text h1,
.hero-photo .hero-text .hero-lead { text-shadow: 0 2px 18px rgba(6, 18, 32, .55); }

.hero-sea { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-sea .wave {
  position: absolute; left: -25%; right: -25%; height: 220px;
  border-radius: 45%;
  background: rgba(58, 159, 216, .10);
  animation: dfp-swell 22s ease-in-out infinite;
}
.hero-sea .wave-1 { bottom: -160px; animation-duration: 24s; }
.hero-sea .wave-2 { bottom: -185px; background: rgba(58, 159, 216, .07); animation-duration: 31s; animation-direction: reverse; }
.hero-sea .wave-3 { bottom: -205px; background: rgba(255, 255, 255, .05); animation-duration: 38s; }
@keyframes dfp-swell {
  0%, 100% { transform: translate3d(-2%, 0, 0) rotate(-.6deg); }
  50%      { transform: translate3d(2%, -10px, 0) rotate(.6deg); }
}
.hero-boat {
  position: absolute; right: 5%; bottom: 12%; z-index: 1;
  width: clamp(150px, 22vw, 280px); height: auto;
  fill: rgba(255, 255, 255, .07);
  animation: dfp-sail 9s ease-in-out infinite;
}
@keyframes dfp-sail {
  0%, 100% { transform: translateY(0) rotate(-1.4deg); }
  50%      { transform: translateY(-12px) rotate(1.4deg); }
}

/* ── Bandes et titres de section ───────────────────────────────────────── */

.band { padding: clamp(2.6rem, 6vw, 4.4rem) 0; }
.band-tint { background: var(--paper); border-block: 1px solid var(--line); }
.band-title {
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  margin: 0 0 1.8rem; position: relative; padding-bottom: .7rem;
}
.band-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 68px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
}

/* ── En-tête de contenu ────────────────────────────────────────────────── */

.entry-head { padding: clamp(2rem, 5vw, 3.2rem) 0 1.2rem; }

/* Bandeau de titre avec l'image a la une en fond. Comme sur l'accueil, on
   passe par une vraie balise <img> en couverture et non par background-image :
   l'attribut alt est conserve et le navigateur precharge l'image. */
.entry-head.has-cover {
  position: relative; isolation: isolate;
  padding: clamp(3.4rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--navy-deep);
}
.entry-cover { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.entry-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.entry-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(102deg, rgba(8, 22, 38, .93) 0%, rgba(10, 28, 47, .87) 44%,
                    rgba(12, 33, 55, .72) 74%, rgba(12, 33, 55, .6) 100%),
    linear-gradient(to bottom, rgba(8, 22, 38, .5) 0%, rgba(8, 22, 38, .1) 40%,
                    rgba(8, 22, 38, .55) 100%);
}
.entry-head.has-cover h1 { color: #fff; text-shadow: 0 2px 18px rgba(6, 18, 32, .55); }
.entry-head.has-cover .entry-lead {
  color: rgba(255, 255, 255, .9); text-shadow: 0 1px 14px rgba(6, 18, 32, .5);
}
.entry-head.has-cover .entry-meta { color: rgba(255, 255, 255, .78); }
.entry-head.has-cover .entry-meta .dot { color: rgba(255, 255, 255, .4); }
.entry-cover-caption {
  max-width: var(--measure); margin: .9rem auto 0;
  font-size: .84em; color: var(--ink-soft);
}
/* Le fil d'Ariane precede le bandeau : on supprime le trait de separation
   pour que les deux blocs se touchent proprement. */
.breadcrumb-bar:has(+ main .entry-head.has-cover) { border-bottom: 0; }
.entry-head h1 {
  font-size: clamp(1.95rem, 4.4vw, 3.05rem);
  max-width: var(--measure); margin-bottom: .5rem;
  text-wrap: balance;
}
.entry-list .entry-head h1, .entry-post .entry-head h1 { max-width: var(--measure); }
.entry-lead {
  margin: 0; max-width: var(--measure);
  font-size: 1.3rem; line-height: 1.6; color: var(--ink-soft);
}
.entry-meta {
  margin: .35rem 0 0; font-size: .87rem; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
}
.entry-meta .dot { color: var(--line); }

.entry-hero { margin: 0 0 2.2rem; }
.entry-hero img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.entry-hero figcaption {
  margin-top: .6rem; font-size: .84rem; color: var(--ink-soft); text-align: center;
}

/* ── Corps rédactionnel ────────────────────────────────────────────────── */

/* Colonne de lecture : meme boite pour le titre, le chapo, l'image et le
   corps, centree dans le conteneur. Sans cela le texte reste colle a gauche et
   laisse un vide a droite sur les grands ecrans. */
.entry-head h1,
.entry-lead,
.entry-meta,
.entry-hero,
.prose,
.pager,
body .qcms-form-wrap,
.sqcms-toc { margin-inline: auto; }

/* Bandes de section : une par <h2>, pleine largeur, fond alterne. Le rythme
   vient du gabarit, pas du redacteur : un texte importe se met en page seul. */
.ps { position: relative; }
.ps-intro { padding: clamp(2rem, 4vw, 3rem) 0 .5rem; }
.ps-band  { padding: clamp(2.2rem, 4.5vw, 3.6rem) 0; }
.ps-tint  { background: var(--paper); }
.ps-tint + .ps-tint { padding-top: 0; }
.ps-band > .wrap > .prose > h2:first-child { margin-top: 0; }
.ps-band:last-child { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

/* Le bloc de lecture occupe le conteneur ; seuls les elements de texte sont
   ramenes a la largeur de lecture. Les figures, tableaux et rangees debordent
   volontairement, ce qui donne le rythme editorial. */
.prose { max-width: var(--wrap); padding-bottom: 0; }
/* Filet de securite : une adresse collee dans l'editeur, un identifiant, un
   mot compose sans espace ne doivent jamais elargir la page. On coupe le mot
   plutot que de laisser apparaitre une barre de defilement horizontale. */
.prose, .entry-lead, .dfp-row, .dfp-steps, .dfp-stats,
.dfp-note, .dfp-key, .dfp-warn { overflow-wrap: anywhere; }
.prose > p, .prose > h2, .prose > h3, .prose > h4,
.prose > ul, .prose > ol, .prose > blockquote, .prose > details {
  max-width: var(--measure); margin-inline: auto;
}
.prose > figure, .prose > table, .prose > .dfp-row, .prose > .dfp-steps,
.prose > .dfp-stats, .prose > .table-scroll {
  max-width: min(var(--wrap), 1120px); margin-inline: auto;
}
.entry-list .prose, .tpl-blog .prose { max-width: var(--wrap); }
/* Rythme vertical : on remet à zéro toutes les marges des enfants directs, puis
   on n'espace que par le haut. L'ordre compte, les deux règles ont la même
   spécificité. Ne jamais ajouter un `.prose p { margin: 0 }` plus loin : il est
   plus spécifique et écraserait l'espacement entre paragraphes. */
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: clamp(1.45rem, 3vw, 1.92rem);
  margin-top: 2.4em; margin-bottom: .8em; padding-left: .85rem;
  border-left: 4px solid var(--blue-bright); scroll-margin-top: 110px;
}
/* Dans une bande, le titre ouvre la section : pas de marge haute, un filet
   court au dessus plutot qu'une barre laterale. */
.ps-band .prose > h2 {
  margin-top: 0; padding-left: 0; border-left: 0;
  padding-top: 1.1rem; position: relative;
}
.ps-band .prose > h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
}
.ps-tint .prose > h2::before { background: linear-gradient(90deg, var(--signal), #ff8a5c); }
.prose h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.44rem);
  margin-top: 1.9em; margin-bottom: .45em; color: var(--blue-dark);
  scroll-margin-top: 110px;
}
.prose h4 { font-size: 1.16rem; margin-top: 1.6em; margin-bottom: .4em; }
.prose a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .17em;
  transition: color .16s ease, text-decoration-color .16s ease;
}
.prose a:hover { color: var(--signal-ink); text-decoration-thickness: 2px; }
.prose strong { color: var(--navy); font-weight: 700; }
.prose ul, .prose ol { margin-left: 0; padding-left: 1.3rem; }
.prose li + li { margin-top: .35em; }
.prose ul li::marker { color: var(--blue-bright); }
.prose ol li::marker { color: var(--blue); font-weight: 700; }
.prose img { border-radius: var(--radius); }
.prose figure { margin: 2rem 0; }
.prose figure img { box-shadow: var(--shadow-sm); }
.prose figcaption {
  margin-top: .55rem; font-size: .84em; color: var(--ink-soft);
  border-left: 3px solid var(--sky); padding-left: .7rem;
}
.prose blockquote {
  margin: 2rem 0; padding: 1.1rem 1.4rem;
  border-left: 4px solid var(--blue); background: var(--sky);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.03em; color: var(--navy);
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: .8em; }

/* Avis client verbatim. Le texte du client est repris mot pour mot : il doit
   se distinguer nettement du texte de l'agence qui l'entoure, sans quoi le
   lecteur ne sait plus qui parle. Guillemet ouvrant en filigrane, citation en
   italique, signature en petites capitales. */
.prose blockquote.dfp-avis {
  position: relative;
  margin: 2.4rem auto; padding: 1.6rem 1.6rem 1.3rem 3.2rem;
  border-left: 4px solid var(--signal); background: var(--sand);
  font-size: 1.08em; font-style: italic; color: var(--ink);
}
.prose blockquote.dfp-avis::before {
  content: "\201C";
  position: absolute; left: .75rem; top: -.35rem;
  font-family: var(--font-heading-stack); font-size: 4rem; line-height: 1;
  color: var(--signal); opacity: .32;
}
.prose blockquote.dfp-avis cite,
.prose blockquote.dfp-avis footer {
  display: block; margin-top: .9rem;
  font-style: normal; font-size: .82em; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
.ps-tint .prose blockquote.dfp-avis { background: var(--white); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }

/* Tableaux : défilement horizontal en mobile */
.prose table {
  width: 100%; border-collapse: collapse; margin: 2rem 0;
  font-size: .93em; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.prose thead th {
  background: var(--navy); color: #fff; text-align: left;
  font-family: var(--font-heading-stack); font-weight: 700;
  padding: .8rem 1rem; font-size: .95em;
}
.prose td, .prose th { padding: .68rem .95rem; border-top: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:nth-child(odd) { background: var(--paper); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Encadrés éditoriaux (classes utilitaires transmises aux rédacteurs) */
.dfp-note, .dfp-warn, .dfp-key {
  margin: 2rem 0; padding: 1.15rem 1.35rem;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--paper); font-size: .96em;
}
.dfp-note  { border-left: 4px solid var(--blue);   background: var(--sky); }
.dfp-warn  { border-left: 4px solid var(--signal); background: #fdf3ec; }
.dfp-key   { border-left: 4px solid var(--blue-bright); background: var(--sand); }
.dfp-note > :first-child, .dfp-warn > :first-child, .dfp-key > :first-child { margin-top: 0; }
.dfp-note > :last-child, .dfp-warn > :last-child, .dfp-key > :last-child { margin-bottom: 0; }
.dfp-note strong:first-child, .dfp-warn strong:first-child, .dfp-key strong:first-child {
  display: block; margin-bottom: .35rem;
  font-family: var(--font-heading-stack); font-size: 1.02rem;
}

/* ── Formulaires natifs ────────────────────────────────────────────────────
   Le cœur rend une étiquette vide pour les cases à cocher, qui ne contient que
   l'astérisque de champ obligatoire : on la masque, l'astérisque étant déjà
   porté par le libellé de la case elle-même. */
body .qcms-field-group:has(> .qcms-checkbox-label) > .qcms-label { display: none; }

body .qcms-form-wrap { max-width: var(--measure-form); margin: 1.6rem 0 2.5rem; }
body .qcms-row { margin-bottom: 1rem; }
body .qcms-row-multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
body .qcms-label { display: block; margin-bottom: .35rem; font-size: .9rem; font-weight: 600; color: var(--navy); }
body .qcms-req { color: var(--signal-ink); }
body .qcms-input, body .qcms-form textarea, body .qcms-form select {
  width: 100%; padding: .7rem .9rem; font: inherit; font-size: .96rem;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body .qcms-input:focus, body .qcms-form textarea:focus, body .qcms-form select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43, 95, 167, .16); outline: none;
}
body .qcms-checkbox-label { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); }
body .qcms-checkbox-label input { margin-top: .28rem; accent-color: var(--blue); }
body .qcms-submit {
  padding: .82rem 1.7rem; font: inherit; font-weight: 700; cursor: pointer;
  color: #fff; background: var(--blue); border: 0; border-radius: 10px;
  transition: background .18s ease, transform .18s ease;
}
body .qcms-submit:hover { background: var(--signal); transform: translateY(-1px); }
body .qcms-alert { padding: .85rem 1.05rem; border-radius: 10px; margin-bottom: 1.1rem; font-size: .95rem; }
body .qcms-alert-success { background: #e6f4ec; border: 1px solid #b9dfc9; color: #1c5b38; }
body .qcms-alert-error { background: #fdecec; border: 1px solid #f2c3c3; color: #8d2020; }
@media (max-width: 620px) { body .qcms-row-multi { grid-template-columns: 1fr; } }


/* ── Composants editoriaux utilisables dans le contenu ─────────────────────
   Rangee de blocs courts, suite d'etapes numerotees, serie de reperes.
   Tous en grille simple, sans script, et repliables en une colonne. */
.dfp-row {
  list-style: none; margin: 2.2rem auto; padding: 0;
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.dfp-row > li, .dfp-row > div {
  margin: 0; padding: 1.3rem 1.4rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.ps-tint .dfp-row > li, .ps-tint .dfp-row > div { background: var(--white); }
.dfp-row h3, .dfp-row h4 {
  margin: 0 0 .4rem; font-size: 1.02em; line-height: 1.35; color: var(--navy);
}
.dfp-row p { margin: 0; font-size: .95em; line-height: 1.6; color: var(--ink-soft); }
.dfp-row p + p { margin-top: .5rem; }

.dfp-steps {
  list-style: none; margin: 2.2rem auto; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  counter-reset: dfpstep;
}
.dfp-steps > li {
  margin: 0; padding: 1.2rem 1.3rem 1.3rem;
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--blue-bright); border-radius: var(--radius);
  counter-increment: dfpstep; position: relative;
}
.dfp-steps > li::before {
  content: counter(dfpstep);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: .6rem;
  font-family: var(--font-heading-stack); font-size: .95rem; font-weight: 700;
  color: #fff; background: var(--blue); border-radius: 50%;
}
.dfp-steps h3, .dfp-steps h4 { margin: 0 0 .35rem; font-size: 1.02em; line-height: 1.35; color: var(--navy); }
.dfp-steps p { margin: 0; font-size: .94em; line-height: 1.6; color: var(--ink-soft); }

/* A partir de cinq etapes, la grille laisserait une carte orpheline sur la
   deuxieme ligne. On bascule alors en frise verticale : le numero a gauche,
   le texte a droite, sur la largeur de lecture. */
.dfp-steps:has(> li:nth-child(5)) {
  display: block; max-width: var(--measure);
}
.dfp-steps:has(> li:nth-child(5)) > li {
  display: grid; grid-template-columns: 40px 1fr; column-gap: 1.1rem;
  align-items: start;
  padding: 1.05rem 1.3rem;
  border: 1px solid var(--line); border-left: 3px solid var(--blue-bright);
}
.dfp-steps:has(> li:nth-child(5)) > li + li { margin-top: .8rem; }
.dfp-steps:has(> li:nth-child(5)) > li::before {
  grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0;
}
.dfp-steps:has(> li:nth-child(5)) > li > * { grid-column: 2; }

.dfp-stats {
  list-style: none; margin: 2.2rem auto; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.dfp-stats > li {
  margin: 0; padding: 1.3rem 1.2rem; text-align: center;
  background: var(--sky); border-radius: var(--radius);
}
.dfp-stats strong {
  display: block; font-family: var(--font-heading-stack);
  font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; color: var(--blue-dark);
}
.dfp-stats span { display: block; margin-top: .35rem; font-size: .9em; color: var(--ink-soft); }

@media (max-width: 620px) {
  .dfp-row, .dfp-steps, .dfp-stats { grid-template-columns: 1fr; gap: 1rem; }
}

/* Grille des atouts (accueil) : trois par ligne, icone a gauche du texte,
   sans carte ni bordure, comme la bande d'origine du site WordPress. */
.dfp-atouts {
  list-style: none; margin: 2.2rem 0 .5rem; padding: 0;
  display: grid; gap: 2rem clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}
.dfp-atouts li {
  margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
  display: grid; grid-template-columns: 60px minmax(0, 1fr);
  gap: 1.1rem; align-items: start;
}
.dfp-atouts img {
  grid-row: 1 / span 2;
  width: 60px; height: 60px; object-fit: contain; margin: 0;
  transition: transform .25s ease;
}
.dfp-atouts li:hover img { transform: translateY(-3px) scale(1.05); }
.dfp-atouts h3 {
  margin: 0 0 .25rem; font-size: 1.08rem; line-height: 1.3; color: var(--navy);
  align-self: center;
}
.dfp-atouts p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.prose .dfp-atouts { max-width: none; }

/* Graphiques SVG en ligne */
.dfp-chart { margin: 2.4rem auto; }
.dfp-chart svg { width: 100%; height: auto; display: block; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.dfp-chart figcaption { text-align: left; }
.dfp-chart .c-axis   { stroke: #b9c6d4; stroke-width: 1; }
.dfp-chart .c-grid   { stroke: #e3eaf2; stroke-width: 1; }
.dfp-chart .c-bar    { fill: var(--blue); }
.dfp-chart .c-bar-2  { fill: var(--blue-bright); }
.dfp-chart .c-bar-3  { fill: var(--signal); }
.dfp-chart .c-label  { font-family: var(--font-body-stack); font-size: 11px; fill: var(--ink-soft); }
.dfp-chart .c-value  { font-family: var(--font-body-stack); font-size: 11px; font-weight: 700; fill: var(--navy); }
.dfp-chart .c-title  { font-family: var(--font-heading-stack); font-size: 14px; font-weight: 700; fill: var(--navy); }
.dfp-chart .c-line   { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.dfp-chart .c-area   { fill: rgba(43, 95, 167, .12); }
.dfp-chart .c-node   { fill: var(--white); stroke: var(--blue); stroke-width: 2.2; }
.dfp-chart .c-box    { fill: var(--white); stroke: var(--blue); stroke-width: 1.6; }
.dfp-chart .c-box-alt{ fill: var(--sky); stroke: var(--blue-bright); stroke-width: 1.6; }
.dfp-chart .c-arrow  { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; }

/* Accordéons sans JavaScript */
.prose details {
  margin: 1.2rem 0; padding: .1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.prose summary {
  cursor: pointer; padding: .85rem 0; font-weight: 700;
  font-family: var(--font-heading-stack); color: var(--navy);
  list-style: none;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after {
  content: "+"; float: right; color: var(--blue-bright); font-size: 1.3rem; line-height: 1;
  transition: transform .2s ease;
}
.prose details[open] summary::after { content: "–"; }
.prose details > :last-child { margin-bottom: 1rem; }

/* Serie d'accordeons traitee comme un bloc unique : sur une page longue, une
   suite de questions repliees doit se lire comme une liste, pas comme dix
   encadres independants separes par du vide. */
.prose > .dfp-faq { max-width: min(var(--wrap), 1120px); margin: 2.2rem auto; }
.prose .dfp-faq > details { margin: 0; border-radius: 0; border-bottom: 0; }
.prose .dfp-faq > details:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.prose .dfp-faq > details:last-of-type  { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 1px solid var(--line); }
.prose .dfp-faq > details[open] { background: var(--paper); }
.ps-tint .prose .dfp-faq > details[open] { background: var(--white); }
.prose .dfp-faq > details + details { border-top: 1px solid var(--line); }

/* Zone d'intervention : liste de communes, compacte et sans puce. */
.prose > .dfp-zone {
  list-style: none; margin: 1.6rem auto; padding: 1.2rem 1.4rem;
  max-width: min(var(--wrap), 1120px);
  display: flex; flex-wrap: wrap; gap: .5rem .7rem;
  background: var(--sky); border-radius: var(--radius);
}
.prose > .dfp-zone > li {
  margin: 0; padding: .3rem .8rem; font-size: .92em; font-weight: 600;
  color: var(--navy); background: var(--white); border-radius: 20px;
}

/* Sommaire (extension sommaire-quietcms), simplement habillé */
.sqcms-toc {
  --sqcms-accent: var(--blue);
  --sqcms-bg: var(--paper);
  --sqcms-text: var(--ink);
  --sqcms-border: var(--line);
  max-width: var(--measure);
}

/* ── Cartes ────────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 1.4rem; }
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
  display: flex; flex-direction: column;
  background: var(--white); color: inherit; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #c3d3e4; }
.card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sky); }
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.card:hover .card-media img { transform: scale(1.045); }
.card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.3rem 1.35rem; flex: 1; }
.card-tag {
  align-self: flex-start; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-dark); background: var(--sky);
  padding: .22rem .6rem; border-radius: 20px;
}
.card-title {
  font-family: var(--font-heading-stack); font-size: 1.1rem; font-weight: 700;
  line-height: 1.3; color: var(--navy);
}
.card:hover .card-title { color: var(--blue-dark); }
.card-text { font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }
.card-date { font-size: .8rem; color: var(--ink-soft); margin-top: auto; padding-top: .3rem; }
.card-go {
  margin-top: auto; padding-top: .5rem;
  font-size: .84rem; font-weight: 700; color: var(--blue);
  display: inline-flex; align-items: center; gap: .4rem;
}
.card-go::after {
  content: "→"; transition: transform .22s ease; display: inline-block;
}
.card:hover .card-go::after { transform: translateX(4px); }

.empty-note { color: var(--ink-soft); font-style: italic; }

/* ── Pagination ────────────────────────────────────────────────────────── */

.pager { margin: 2.6rem 0 1rem; }
.pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.pager a, .pager .is-current, .pager .gap {
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .6rem;
  border-radius: 10px; font-size: .93rem; font-weight: 600; text-decoration: none;
}
.pager a { color: var(--blue-dark); background: var(--paper); border: 1px solid var(--line); transition: background .16s ease, color .16s ease; }
.pager a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.pager .is-current { background: var(--navy); color: #fff; }
.pager .gap { color: var(--ink-soft); }

/* ── Page 404 ──────────────────────────────────────────────────────────── */

.notfound { text-align: center; padding: clamp(3rem, 9vw, 6rem) 0; max-width: 640px; margin-inline: auto; }
.nf-mark { width: 190px; height: auto; margin: 0 auto 1.4rem; }
.nf-hull, .nf-sail, .nf-sail2 { fill: var(--sky); }
.nf-sail2 { fill: #d5e6f4; }
.nf-wave { fill: none; stroke: var(--blue-bright); stroke-width: 3; stroke-linecap: round; }
.nf-code { margin: 0; font-family: var(--font-heading-stack); font-size: 3.2rem; color: var(--blue-bright); line-height: 1; }
.notfound h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-top: .4rem; }
.nf-text { color: var(--ink-soft); }
.nf-cta a {
  display: inline-block; margin-top: .8rem; padding: .8rem 1.6rem;
  background: var(--blue); color: #fff; text-decoration: none;
  border-radius: 10px; font-weight: 700;
  transition: background .18s ease, transform .18s ease;
}
.nf-cta a:hover { background: var(--signal); transform: translateY(-2px); }

/* ── Pied de page ──────────────────────────────────────────────────────── */

.site-footer { background: var(--footer-bg); color: rgba(255, 255, 255, .74); margin-top: 3rem; }
.footer-top {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.5rem; padding: 3rem 0 2.2rem;
}
.footer-logo { height: 44px; width: auto; opacity: .95; margin-bottom: 1rem; }
.footer-about { margin: 0 0 .8rem; max-width: 54ch; font-size: .95rem; }
.footer-addr { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .58); }
.footer-h {
  margin: 0 0 .9rem; color: #fff; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.footer-links ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-links a { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .94rem; transition: color .16s ease; }
.footer-links a:hover { color: var(--blue-bright); text-decoration: underline; }
.footer-social { flex-direction: row !important; gap: 1rem !important; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 1.1rem 0; font-size: .84rem; color: rgba(255, 255, 255, .55);
}

/* ── Barre de progression et retour en haut ────────────────────────────── */

.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright), var(--signal));
}
.back-to-top {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1400;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--navy); color: #fff; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s, background .18s ease;
}
.back-to-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--blue); }
.back-to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── Révélation au défilement ──────────────────────────────────────────── */

/* Le masquage initial est conditionne a la classe « js » posee par le gabarit.
   Sans JavaScript, aucune carte n'est masquee : mieux vaut perdre l'animation
   que perdre le contenu. Ne jamais remettre .reveal { opacity: 0 } tout seul. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1240px) {
  .nav-list > li > a { padding: .6rem .5rem; font-size: .86rem; }
  .nav-search input { width: 112px; padding-left: .85rem; font-size: .84rem; }
  .nav-search button { width: 40px; }
}

@media (max-width: 1080px) {
  .dfp-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  :root { --header-height: 64px; }
  .hero-photo { padding-block: clamp(3rem, 9vw, 5rem); }
  .hero-bg img { object-position: 66% 30%; }
  .topbar-text { display: none; }
  .topbar-contact { margin-inline: auto; gap: 1rem; font-size: .82rem; }
  .nav-toggle { display: flex; position: relative; z-index: 1300; }
  .brand-logo { height: 38px; }

  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
    width: min(88vw, 360px); margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(var(--header-height) + 1.4rem) 1rem 2.5rem;
    background: var(--navy); overflow-y: auto;
    transform: translateX(102%); transition: transform .28s cubic-bezier(.3, .7, .3, 1);
    box-shadow: -18px 0 40px -24px rgba(0, 0, 0, .9);
  }
  .site-nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav-list li { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-list li > a { flex: 1; }
  .nav-list > li > a, .sub-menu li a { padding: .72rem .8rem; font-size: .95rem; color: #fff; }
  .nav-list > li.is-cta { margin: .9rem 0 0; }
  .nav-list > li.is-cta > a {
    text-align: center; padding: .8rem 1rem; color: var(--signal);
    background: rgba(254, 87, 34, .15);
  }

  .sub-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    background: rgba(255, 255, 255, .08); border: 0; border-radius: 8px; cursor: pointer;
  }
  .sub-toggle span {
    display: block; width: 9px; height: 9px; margin-top: -4px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .sub-toggle[aria-expanded="true"] span { transform: rotate(-135deg); margin-top: 3px; }

  .sub-menu {
    position: static; width: 100%; min-width: 0;
    opacity: 1; visibility: visible; transform: none;
    display: none; background: transparent; border: 0; box-shadow: none;
    padding: 0 0 .3rem .8rem; border-left: 2px solid rgba(255, 255, 255, .14); margin: .15rem 0 .3rem .8rem;
  }
  .nav-list li.sub-open > .sub-menu { display: block; }
  .nav-list li:hover > .sub-menu { opacity: 1; visibility: visible; }
  .sub-menu li a { color: rgba(255, 255, 255, .8); font-size: .9rem; }
  .sub-menu li a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

  .nav-search { margin-top: 1.4rem; height: 46px; }
  .nav-search input { width: 100%; flex: 1; font-size: .95rem; }
  .nav-search input:focus { width: 100%; }
  .nav-search button { width: 52px; }

  .footer-top { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 2.2rem; }
}

@media (max-width: 620px) {
  body { font-size: 18px; line-height: 1.72; }
  .dfp-atouts { grid-template-columns: 1fr; gap: 1.5rem; }
  .dfp-atouts li { grid-template-columns: 52px minmax(0, 1fr); gap: .9rem; }
  .dfp-atouts img { width: 52px; height: 52px; }
  .wrap { width: calc(100% - 2rem); }
  .cards-3 { grid-template-columns: 1fr; }
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
  .prose thead th, .prose td { padding: .6rem .75rem; }
  .hero-boat { opacity: .5; right: -4%; }
  .hero-bg img { object-position: 70% 28%; }
  .hero-veil { background: linear-gradient(to bottom, rgba(9,24,41,.9) 0%, rgba(11,30,50,.86) 55%, rgba(13,36,60,.92) 100%); }
  .entry-head.has-cover { padding: 2.4rem 0 2.2rem; }
  .entry-veil { background: linear-gradient(to bottom, rgba(8,22,38,.88) 0%, rgba(10,28,47,.84) 55%, rgba(12,33,55,.9) 100%); }
  .entry-hero img { border-radius: var(--radius); }
}

/* ── Mouvement réduit ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Impression ────────────────────────────────────────────────────────── */

@media print {
  .topbar, .site-header, .breadcrumb-bar, .site-footer,
  .back-to-top, .reading-progress, .pager, .nav-scrim,
  .band-tint, .card-media { display: none !important; }
  body { font-size: 11.5pt; line-height: 1.5; color: #000; background: #fff; }
  .wrap { width: 100%; }
  .prose { max-width: none; }
  .prose a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
  .entry-hero img { box-shadow: none; }
  .entry-cover, .entry-veil { display: none !important; }
  .entry-head.has-cover { padding: 0; background: none; }
  .ps-tint { background: none !important; }
  .ps-band { padding: .6rem 0; }
  .entry-head.has-cover h1, .entry-head.has-cover .entry-lead { color: #000; text-shadow: none; }
  h1, h2, h3 { page-break-after: avoid; }
  table, figure, blockquote { page-break-inside: avoid; }
}