/* Carnet « Un automne en pleine houle » : identité visuelle propre, limitée à .houle */
/* Layout : un carnet de bord en bandes horizontales, de la surface (le contexte) vers le fond (la jeunesse), puis retour au port (Toulon, méthode, quiz). */
.houle{
  --bg:#F4F8FB; --bg2:#E6EFF6; --card:#FFFFFF; --fg:#0B2440; --fg2:#3D5873; --muted:#6C8299;
  --line:#D3E0EA; --track:#DCE7F0;
  --abysse:#0B2440; --mer:#1F6FB2; --sable:#D99A3E; --posidonie:#14A08A; --ecume:#CFE6F3;
  --s1:#1F6FB2; --s2:#D99A3E; --s3:#14A08A;
  --warn:#B4532A; --ok:#1E7F4F;
  --hero1:#0B2440; --hero2:#1F6FB2; --herofg:#F4F8FB;
  --f-display:"Fraunces Local", Georgia, "Times New Roman", serif;
  --f-body:"Public Sans Local", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data:"IBM Plex Mono Local", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.houle *{box-sizing:border-box}
.houle{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.houle h1,.houle h2,.houle h3{font-family:var(--f-display);text-wrap:balance;line-height:1.12;margin:0}
.houle h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:600;letter-spacing:-.01em}
.houle h3{font-size:1.15rem;font-weight:600}
.houle p{margin:0}
.houle .wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.houle .band{padding-block:clamp(48px,7vw,88px)}
.houle .band.alt{background:var(--bg2)}
.houle .c-eyebrow{font-family:var(--f-data);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mer);margin-bottom:10px;display:flex;gap:10px;align-items:center}
.houle .c-eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.houle .c-lead{font-size:1.12rem;color:var(--fg2);max-width:64ch;margin-top:14px}
.houle .grid{display:grid;gap:20px}
.houle .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.houle .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.houle .g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.houle .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}
.houle .card h3{margin-bottom:8px}
.houle .src{font-family:var(--f-data);font-size:.72rem;color:var(--muted);margin-top:12px;line-height:1.45}
.houle .note{font-size:.88rem;color:var(--fg2)}
.houle .num{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.houle .num small{font-size:.45em;font-weight:600;margin-left:4px}
.houle .chip{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.houle .chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.houle .sect-head{display:grid;gap:6px;margin-bottom:28px}
.houle .mt{margin-top:24px}
.houle svg text{font-family:var(--f-body)}
.houle .axis text,.houle .lbl{fill:var(--fg2);font-size:12px}
.houle .lbl-strong{fill:var(--fg);font-size:13px;font-weight:600}
.houle .val{fill:var(--fg);font-family:var(--f-data);font-size:12px}
.houle .grid-l{stroke:var(--line);stroke-width:1}
.houle .legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.82rem;color:var(--fg2);margin-top:10px}
.houle .legend span{display:inline-flex;align-items:center;gap:6px}
.houle .legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.houle .chart{width:100%;overflow-x:auto}
.houle .chart svg{display:block;max-width:100%;height:auto}
.houle .hit{cursor:default}
.houle .hit:hover .mark,.houle .hit:focus .mark{opacity:.82}
.houle .hit:focus{outline:none}
.houle .hit:focus-visible .mark{stroke:var(--fg);stroke-width:2}

/* hero */
.houle .c-hero{background:linear-gradient(170deg,var(--hero1) 0%,var(--hero2) 100%);color:var(--herofg);position:relative;overflow:hidden}
.houle .c-hero .wrap{padding-block:clamp(56px,9vw,110px) clamp(80px,10vw,130px);position:relative;z-index:1}
.houle .c-hero .c-eyebrow{color:#8EC5EC}
.houle .c-hero h1{font-size:clamp(2.4rem,6.4vw,4.6rem);font-weight:800;letter-spacing:-.02em;max-width:15ch}
.houle .c-hero h1 em{font-style:italic;font-weight:400;color:#8EC5EC}
.houle .c-hero p.c-lead{color:#C9DDEE}
.houle .hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:36px;max-width:820px}
.houle .hero-stat{border-left:2px solid #5FA8DD;padding:4px 0 4px 14px}
.houle .hero-stat b{display:block;font-family:var(--f-display);font-size:2rem;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.houle .hero-stat span{font-size:.85rem;color:#C9DDEE}
.houle .waves{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:90px;z-index:0}
.houle .waves path{fill:var(--bg)}
.houle .waves path.w2{opacity:.35}
@media (prefers-reduced-motion:no-preference){ .houle .waves .w2{animation:drift 14s ease-in-out infinite alternate} }
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-40px)}}

/* nav */
.houle nav.toc{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.houle nav.toc .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.houle nav.toc a{flex:none;font-size:.82rem;font-weight:600;color:var(--fg2);text-decoration:none;padding:6px 12px;border-radius:999px}
.houle nav.toc a:hover,.houle nav.toc a:focus-visible{background:var(--ecume);color:var(--fg);outline:none}

/* timeline */
.houle .tl{display:grid;grid-template-columns:repeat(9,minmax(110px,1fr));gap:0;overflow-x:auto;padding-bottom:6px;position:relative}
.houle .tl button{all:unset;cursor:pointer;display:grid;gap:8px;padding:0 8px 4px;position:relative;min-width:110px}
.houle .tl button .dot{width:16px;height:16px;border-radius:50%;background:var(--card);border:3px solid var(--mer);position:relative;z-index:1}
.houle .tl button.hot .dot{background:var(--sable);border-color:var(--sable)}
.houle .tl button.future .dot{border-style:dashed;border-color:var(--muted)}
.houle .tl button::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line)}
.houle .tl button .d{font-family:var(--f-data);font-size:.75rem;color:var(--mer)}
.houle .tl button .t{font-size:.86rem;font-weight:600;line-height:1.3}
.houle .tl button[aria-pressed="true"] .t{color:var(--mer)}
.houle .tl button[aria-pressed="true"] .dot{transform:scale(1.25)}
.houle .tl button:focus-visible .t{text-decoration:underline}
.houle .tl-detail{margin-top:18px;border-left:3px solid var(--mer);padding:10px 16px;background:var(--card);border-radius:0 12px 12px 0;min-height:84px}

/* waffle */
.houle .waffle{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;max-width:420px}
.houle .waffle i{aspect-ratio:1;border-radius:3px;background:var(--track);max-width:100%}
.houle .waffle i.on{background:var(--s1)}
.houle .waffle i.on2{background:var(--s2)}
.houle .waffle i.on3{background:var(--s3)}

/* publics */
.houle .publics .card{display:grid;gap:8px;align-content:start}
.houle .tag{font-family:var(--f-data);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* toggle */
.houle .seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--card);gap:2px;flex-wrap:wrap}
.houle .seg button{all:unset;cursor:pointer;font-size:.85rem;font-weight:600;padding:6px 14px;border-radius:999px;color:var(--fg2)}
.houle .seg button[aria-pressed="true"]{background:var(--mer);color:#fff}
.houle .seg button:focus-visible{outline:2px solid var(--mer);outline-offset:2px}

/* status table */
.houle table.st{width:100%;border-collapse:collapse;font-size:.92rem}
.houle table.st th{text-align:left;font-size:.72rem;font-family:var(--f-data);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.houle table.st td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.houle .tbl{overflow-x:auto}

/* quiz */
.houle .quiz{display:grid;gap:14px}
.houle .q{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.houle .q p.qq{font-weight:600;margin-bottom:12px}
.houle .q .opts{display:flex;flex-wrap:wrap;gap:8px}
.houle .q .opts button{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:.92rem;font-weight:500;background:var(--bg)}
.houle .q .opts button:hover,.houle .q .opts button:focus-visible{border-color:var(--mer)}
.houle .q .opts button.right{background:color-mix(in srgb,var(--ok) 18%,var(--card));border-color:var(--ok)}
.houle .q .opts button.wrong{background:color-mix(in srgb,var(--warn) 16%,var(--card));border-color:var(--warn)}
.houle .q .ans{margin-top:12px;font-size:.9rem;color:var(--fg2)}
.houle .score{font-family:var(--f-display);font-size:1.4rem;font-weight:600}

/* toulon */
.houle .port{background:linear-gradient(160deg,var(--hero1),var(--hero2));color:var(--herofg);border-radius:20px;padding:clamp(22px,4vw,40px);display:grid;gap:20px}
.houle .port .card{background:color-mix(in srgb,var(--herofg) 8%,transparent);border-color:color-mix(in srgb,var(--herofg) 20%,transparent);color:var(--herofg)}
.houle .port .src{color:#9FC0DC}
.houle .port .num{color:#fff}

.houle .unk li{margin-bottom:8px}
.houle ul.clean{padding-left:18px;margin:0}
.houle footer{padding-block:40px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
.houle #tip{position:fixed;pointer-events:none;z-index:20;background:var(--fg);color:var(--bg);font-size:.82rem;padding:7px 10px;border-radius:8px;max-width:260px;line-height:1.35;opacity:0;transition:opacity .12s}
@media (prefers-reduced-motion:reduce){.houle *{transition:none!important;animation:none!important}}


/* ===================== Intégration dans le site Cap & Méthode ===================== */
@font-face{font-family:"Fraunces Local";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/fraunces-latin-opsz-normal.woff2) format("woff2-variations"),url(../fonts/fraunces-latin-opsz-normal.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:"Fraunces Local";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/fraunces-latin-ext-opsz-normal.woff2) format("woff2-variations"),url(../fonts/fraunces-latin-ext-opsz-normal.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:"Public Sans Local";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/public-sans-latin-wght-normal.woff2) format("woff2-variations"),url(../fonts/public-sans-latin-wght-normal.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:"Public Sans Local";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/public-sans-latin-ext-wght-normal.woff2) format("woff2-variations"),url(../fonts/public-sans-latin-ext-wght-normal.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:"IBM Plex Mono Local";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono Local";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-mono-latin-ext-400-normal.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:"IBM Plex Mono Local";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-latin-500-normal.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:"IBM Plex Mono Local";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-latin-ext-500-normal.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}

body.page-houle{background:#F4F8FB}
.houle{--nav-h:76px;overflow-x:clip}
.houle .c-hero .wrap{padding-top:calc(clamp(36px,5vw,64px) + var(--nav-h))}
.houle h1,.houle h2,.houle h3,.houle h4{color:inherit}
.houle .crumb{font-family:var(--f-data);font-size:.75rem;color:#9FC0DC;margin-bottom:18px}
.houle .crumb a{color:#C9DDEE;border-bottom:1px solid rgba(201,168,76,.7)}
.houle .crumb a:hover{color:#fff}
.houle .byline{margin-top:18px;font-size:.95rem;color:#C9DDEE}
.houle .byline strong{color:#E3CB8A;font-weight:600}
.houle .hero-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.houle nav.toc{top:var(--nav-h)}
.houle section{scroll-margin-top:calc(var(--nav-h) + 56px)}
.houle ul.clean{list-style:disc}
.houle .print-only{display:none}
.houle .dl{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--mer);border-radius:14px;padding:18px 20px;margin-bottom:28px}
.houle .dl p{font-size:.9rem;color:var(--fg2)}
.houle .dl strong{display:block;color:var(--fg);font-size:1rem}
.houle .dl a{font-weight:700;font-size:.9rem;background:var(--mer);color:#fff;padding:10px 16px;border-radius:999px;white-space:nowrap}
.houle .dl a:hover{background:var(--abysse)}

/* ===================== Impression et PDF ===================== */
@media print{
  @page{size:A4;margin:14mm 13mm 14mm}
  html,body,body.page-houle{background:#fff!important}
  /* Grilles en flexbox : Chromium ne coupe pas une rangée de grille entre deux pages */
  .houle .grid{display:flex;flex-wrap:wrap;align-items:stretch}
  .houle .grid>*{flex:1 1 calc(50% - 12px);min-width:0}
  .houle .g4>*{flex-basis:calc(33% - 12px)}
  .houle .grid>.legend,.houle .grid>.src{flex-basis:100%}
  .navbar,footer.footer,.houle nav.toc,.houle #tip,.houle .crumb,.houle .hero-actions,.houle .dl,
  .houle .seg,.houle .tl,.houle .tl-detail,.houle .grid.dep-screen,.houle .q .ans,.houle #score,.houle .waves{display:none!important}
  .houle .print-only{display:block!important}
  .houle{-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:10.5pt}
  .houle .c-hero .wrap{padding:9mm 9mm 10mm}
  .houle .print-brand{display:flex!important;align-items:center;gap:8px;font-family:'Playfair Display',Georgia,serif;font-size:12pt;color:#fff;margin-bottom:6mm}
  .houle .print-brand img{width:22px;height:22px;display:inline-block}
  .houle .print-brand em{font-style:normal;color:#C9A84C}
  .houle .c-hero h1{font-size:34pt}
  .houle .hero-stats{margin-top:18px}
  .houle .wrap{padding-left:0;padding-right:0;max-width:none}
  .houle .band{padding-block:7mm}
  .houle h2{font-size:20pt}
  .houle .c-lead{font-size:11pt}
  .houle .sect-head{margin-bottom:14px;break-after:avoid;break-inside:avoid}
  .houle h2,.houle h3{break-after:avoid}
  .houle .chart,.houle .chart svg,.houle .waffle,.houle .q,.houle .tl-print li,.houle table.st tr,.houle .dep-print .grid,.houle .legend,.houle .hero-stat,.houle .g3>.card,.houle .g4>.card,.houle #euroGrid>.card,.houle #sigGrid>.card,.houle .port .card{break-inside:avoid}
  .houle .card:has(.chart){break-inside:avoid}
  .houle .port{break-inside:auto}
  .houle .chart,.houle .tbl{overflow:visible}
  .houle .grid{gap:12px}
  .houle .card{padding:14px}
  .houle #signaux .grid.mt{margin-top:12px}
  /* Chronologie complète */
  .houle .tl-print{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .houle .tl-print li{display:grid;grid-template-columns:30mm 1fr;gap:10px;border-left:3px solid var(--mer);background:var(--card);padding:8px 12px;border-radius:0 10px 10px 0}
  .houle .tl-print li.hot{border-left-color:var(--sable)}
  .houle .tl-print li.future{border-left-style:dashed;border-left-color:var(--muted)}
  .houle .tl-print .d{font-family:var(--f-data);font-size:.8rem;color:var(--mer)}
  .houle .tl-print b{display:block}
  /* Les deux lectures de la dépense par étudiant */
  .houle .dep-print h4{font-family:var(--f-data);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:14px}
  /* Quiz : bonnes réponses et explications */
  .houle .q .opts button{background:var(--card)}
  .houle .q .opts button.is-ok{background:color-mix(in srgb,var(--ok) 18%,var(--card));border-color:var(--ok);font-weight:700}
  .houle .q .ans-print{margin-top:10px;font-size:.9rem;color:var(--fg2)}
  .houle footer{padding-block:12px;border-top:1px solid var(--line)}
}