/* Poulpi, la feuille de style du site : aplat bleu, encre, ombres dures, décor cubique.
   Outfit : © The Outfit Project Authors, licence SIL Open Font License 1.1. Hébergée ici : aucune requête vers Google. */
@font-face { font-family: Outfit; src: url(/fonts/Outfit-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Outfit; src: url(/fonts/Outfit-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Outfit; src: url(/fonts/Outfit-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light;
  --bleu: #3460e6; --bleu-fonce: #264bbd; --encre: #20252b; --ecume: #8ec9f7; --page: #f3f8fe; --blanc: #fff; --lilas: #d9dbf3; --orange: #f7a823;
  --doux: #4b5560;
  --vague-ecume: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' shape-rendering='crispEdges'%3E%3Cpath d='M-8 28H24V20H48V12H88V20H112V28H136V36H160V28H192V20H216V28H248V72H-8Z' fill='%238ec9f7' stroke='%2320252b' stroke-width='4'/%3E%3Cpath d='M52 28h28v6H64v6H52zM168 42h24v6h-12v6h-12z' fill='%235f93ee'/%3E%3C/svg%3E");
  --vague-bleue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' shape-rendering='crispEdges'%3E%3Cpath d='M-8 28H24V20H48V12H88V20H112V28H136V36H160V28H192V20H216V28H248V72H-8Z' fill='%233460e6' stroke='%2320252b' stroke-width='4'/%3E%3C/svg%3E");
  --vague-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' shape-rendering='crispEdges'%3E%3Cpath d='M-8 28H24V20H48V12H88V20H112V28H136V36H160V28H192V20H216V28H248V72H-8Z' fill='%23f3f8fe' stroke='%2320252b' stroke-width='4'/%3E%3C/svg%3E");
  --vague-encre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' shape-rendering='crispEdges'%3E%3Cpath d='M-8 28H24V20H48V12H88V20H112V28H136V36H160V28H192V20H216V28H248V72H-8Z' fill='%2320252b'/%3E%3C/svg%3E");
  --monts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='96' shape-rendering='crispEdges'%3E%3Cpath d='M96 96V64H128V48H152V32H168V48H200V64H248V96ZM388 96V72H444V96ZM560 96V64H592V48H656V64H704V96ZM812 96V64H836V48H844V40H852V48H860V40H868V48H884V64H920V96Z' fill='%23264bbd'/%3E%3C/svg%3E");
  --blocs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='40' shape-rendering='crispEdges'%3E%3Cpath d='M128 24h80v8h-80zM432 16h64v8h-64zM628 16h40v6h-40z' fill='%23d9dbf3'/%3E%3Cpath d='M48 0H272V8H240V16H208V24H128V16H88V8H48ZM392 0H520V8H496V16H432V8H392ZM604 0H692V8H668V16H628V8H604Z' fill='%23fff'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bleu); color: var(--encre);
  font: 500 1.0625rem/1.6 Outfit, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--bleu-fonce); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
h1, h2, h3 { margin: 0; font-weight: 800; }
p { margin: 0; }
code { padding: 1px 6px; background: #dfeafb; border: 1.5px solid var(--encre); font: 700 .88em/1.3 ui-monospace, Consolas, Menlo, monospace; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.sur-bleu :focus-visible, .pied :focus-visible { outline-color: var(--blanc); }

.evitement { position: absolute; left: 12px; top: -100px; z-index: 10; padding: 10px 16px; background: var(--blanc); border: 3px solid var(--encre); font-weight: 700; }
.evitement:focus { top: 12px; }
.large { width: min(1180px, 100%); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 760px) { .large { padding-inline: 32px; } }

/* ─── Les boutons, les étiquettes ─── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; text-align: center;
  background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); box-shadow: 5px 5px 0 var(--encre);
  font: inherit; font-weight: 800; line-height: 1.15; text-decoration: none; cursor: pointer;
  transition: transform .08s linear, box-shadow .08s linear;
}
.bouton:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--encre); }
.bouton:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--encre); }
.bouton-bleu { background: var(--bleu); color: var(--blanc); }
.bouton-grand { min-height: 60px; padding: 14px 30px; font-size: 1.25rem; box-shadow: 7px 7px 0 var(--encre); }
.bouton-petit { min-height: 44px; padding: 8px 14px; font-size: .94rem; box-shadow: 3px 3px 0 var(--encre); }
.bouton-petit:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--encre); }
.etiquette {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--blanc); color: var(--encre);
  border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre);
  font-size: .72rem; font-weight: 800; line-height: 1.4; letter-spacing: .17em; text-transform: uppercase;
}
.etiquette::before { content: ""; flex: none; width: 9px; height: 9px; border: 2.5px solid var(--encre); }
.etiquette-orange { background: var(--orange); }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } }

/* ─── L'en-tête : une barre d'écume, dont les blocs pendent dans le bleu ─── */
.entete { background: var(--blanc); }
.entete-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-block: 10px 6px; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; text-decoration: none; }
.marque img { width: 44px; height: 44px; border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); }
.entete-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.entete-ancre { padding: 8px 6px; color: var(--encre); font-weight: 700; text-decoration: none; }
.entete-ancre:hover { text-decoration: underline; text-decoration-thickness: 3px; }
@media (max-width: 759px) {
  .entete-ancre { display: none; }
  .entete-liens { width: 100%; padding-right: 3px; }
  .entete-liens .bouton { flex: 1 1 auto; padding-inline: 8px; }
}

/* ─── Le haut de la page ─── */
.heros { background: var(--bleu) var(--blocs) repeat-x top / 720px 40px; color: var(--blanc); }
.heros-grille { display: grid; gap: 12px 40px; align-items: center; padding-block: 52px 8px; }
.titre-geant {
  max-width: 100%; margin-top: 16px; font-size: clamp(4.5rem, 11vw, 9rem); line-height: .92; letter-spacing: -.015em; text-transform: uppercase;
  -webkit-text-stroke: .018em var(--blanc);
  --e: clamp(4px, .75vw, 9px);
  text-shadow: calc(var(--e) * .25) calc(var(--e) * .25) 0 var(--encre), calc(var(--e) * .5) calc(var(--e) * .5) 0 var(--encre), calc(var(--e) * .75) calc(var(--e) * .75) 0 var(--encre), var(--e) var(--e) 0 var(--encre);
}
.heros-phrase { display: block; margin-top: 16px; font-size: clamp(1.45rem, 1.1rem + 1.7vw, 2.3rem); line-height: 1.15; text-shadow: 2px 2px 0 var(--encre); }
@media (min-width: 760px) { .heros-phrase { text-shadow: 2px 2px 0 var(--encre), 3px 3px 0 var(--encre); } }
.heros-texte { max-width: 34em; margin-top: 16px; font-size: 1.15rem; }
.heros-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; padding-right: 7px; }
.heros-lien { color: var(--blanc); font-weight: 700; }
.heros-poulpe { justify-self: center; width: min(62vw, 250px); aspect-ratio: 1; overflow: hidden; }
.heros-poulpe img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
@media (min-width: 900px) {
  .heros-grille { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); column-gap: clamp(56px, 7.5vw, 128px); padding-top: 68px; }
  .heros-poulpe { justify-self: end; width: min(100%, 250px); margin-left: auto; }
}
.relief { height: 118px; margin-top: -8px; background: var(--vague-ecume) repeat-x left bottom / 240px 64px, var(--monts) repeat-x left bottom 30px / 960px 96px; }
.relief-court { height: 48px; margin-top: 0; }
.vague-bleue { background: var(--vague-bleue) repeat-x left bottom / 240px 48px; }
.vague-ecume { background: var(--vague-ecume) repeat-x left top / 240px 64px; height: 56px; }
.vague-page { background: var(--vague-page) repeat-x left bottom / 240px 48px; }
.vague-encre { background: var(--vague-encre) repeat-x left bottom / 240px 48px; }

/* ─── Les sections ─── */
.section { padding-block: 44px 64px; }
.section-ecume { background: var(--ecume); }
.section-bleue { background: var(--bleu); color: var(--blanc); }
.fond-ecume { background-color: var(--ecume); }
.fond-bleu { background-color: var(--bleu); }
.fond-page { background-color: var(--page); }
.titre-section { margin-top: 14px; font-size: clamp(2.15rem, 1.35rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -.015em; }
.section-bleue .titre-section { text-shadow: 1.5px 1.5px 0 var(--encre), 3px 3px 0 var(--encre); }
@media (min-width: 760px) { .section-bleue .titre-section { text-shadow: 2px 2px 0 var(--encre), 4px 4px 0 var(--encre); } }
.chapo { max-width: 40em; margin-top: 14px; font-size: 1.15rem; }

.cadre { margin: 0; }
.cadre img, .cadre-image { width: 100%; border: 3px solid var(--encre); box-shadow: 6px 6px 0 var(--encre); background: #2b2d31; }
.cadre figcaption { margin-top: 12px; font-size: .95rem; font-weight: 700; }

/* /poulpi */
.apercu-grille { display: grid; gap: 34px; margin-top: 30px; padding-right: 6px; }
.etapes { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; counter-increment: etape; }
.etapes li::before {
  content: counter(etape); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--bleu); color: var(--blanc); border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); font-size: 1.3rem; font-weight: 800;
}
.etapes strong { font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.fiche-empilee { display: grid; background: #2b2d31; border: 3px solid var(--encre); box-shadow: 6px 6px 0 var(--encre); }
.fiche-empilee img { width: 100%; }
.colonne-gauche { display: grid; gap: 30px; align-content: start; }
@media (min-width: 900px) { .apercu-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; } }

/* Ce que fait Poulpi */
.groupes { display: grid; gap: 26px; margin-top: 30px; padding-right: 6px; }
@media (min-width: 900px) { .groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte { background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); box-shadow: 6px 6px 0 var(--encre); padding: 20px; }
.carte-entiere { grid-column: 1 / -1; }
.lignes { display: grid; gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.lignes li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.lignes h3 { font-size: 1.25rem; line-height: 1.25; }
.lignes h3 code { margin-left: 4px; font-size: .78em; }
.lignes p { margin-top: 2px; }
.ico { display:block; width:48px; height:48px; flex:none; background-position:center; background-repeat:no-repeat; background-size:contain; }
.i-salut { background-image:url(/images/stickers/autocollant_salut.png); }
.i-reglement { background-image:url(/images/stickers/autocollant_reglement.png); }
.i-roles { background-image:url(/images/stickers/autocollant_bouclier.png); }
.i-ticket { background-image:url(/images/stickers/autocollant_ticket.png); }
.i-idee { background-image:url(/images/stickers/autocollant_coeur.png); }
.i-flamme { background-image:url(/images/stickers/autocollant_flamme.png); }
.i-encart { background-image:url(/images/stickers/autocollant_encart.png); }
.i-marteau { background-image:url(/images/stickers/autocollant_bouclier.png); }
.i-bouclier { background-image:url(/images/stickers/autocollant_bouclier.png); }
.i-robot { background-image:url(/images/stickers/autocollant_robot.png); }
.i-outils { background-image:url(/images/stickers/autocollant_encart.png); }
.i-langue { background-image:url(/images/stickers/autocollant_salut.png); }
.i-cadeau { background-image:url(/images/stickers/autocollant_cadeau.png); }
.i-image { background-image:url(/images/stickers/autocollant_encart.png); }

/* Les styles et les cartes */
.styles { display: grid; gap: 26px; margin-top: 28px; padding-right: 6px; }
@media (min-width: 900px) { .styles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.styles-banniere { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; margin-top:22px; }
.style-banniere { padding:16px; background:#fff; border:1px solid #d3dbf1; border-radius:14px; box-shadow:0 2px 8px rgba(20,29,82,.07); }
.style-banniere h3 { font-size:1rem; }
.style-banniere p { margin-top:6px; color:#43516d; font-size:.94rem; line-height:1.4; }
.emoji-styles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:14px; margin-top:22px; }
.emoji-style { min-width:0; padding:14px; background:#fff; border:1px solid #d3dbf1; border-radius:14px; box-shadow:0 2px 8px rgba(20,29,82,.07); }
.emoji-style h4 { margin:0; font-size:1rem; font-weight:800; line-height:1.2; }
.emoji-style img { display:block; width:100%; height:auto; margin:12px auto; border-radius:10px; }
.emoji-style p { margin:8px 0 0; color:#43516d; font-size:.94rem; line-height:1.4; }
.emoji-classiques { display:flex; min-height:72px; align-items:center; justify-content:space-around; margin:12px 0; border-radius:10px; background:#2b2d31; font-size:2rem; }
.style-nom { display: block; font-size: 1.25rem; font-weight: 800; }
.style-texte { display: block; font-weight: 500; }
.sous-titre { margin-top: 44px; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.1; }
.cartes { display: grid; gap: 22px; margin-top: 22px; padding-right: 6px; }
@media (min-width: 620px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bannieres-actuelles figure { min-width:0; margin:0; padding:10px; }
.bannieres-actuelles img { width:100%; height:auto; border:2px solid #142454; border-radius:10px; box-shadow:4px 4px 0 #142454; }
.bannieres-actuelles figcaption { margin-top:12px; font-weight:700; line-height:1.35; }
@media (min-width: 1000px) { .bannieres-actuelles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.note { margin-top: 18px; font-size: .95rem; font-weight: 700; }

/* Les offres */
.offres { display: grid; gap: 28px; margin-top: 30px; padding-right: 7px; }
@media (min-width: 900px) { .offres { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; } }
.offre { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; box-shadow: 7px 7px 0 var(--encre); }
.offre-plus { background: #eaf4fe; }
.prix { margin-top: 18px; font-size: clamp(3.4rem, 2.6rem + 3.4vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.prix-suite { margin-top: 6px; font-size: 1.15rem; font-weight: 700; }
.liste-offre { display: grid; gap: 12px; margin: 20px 0 24px; padding: 0; list-style: none; }
.liste-offre li { position: relative; padding-left: 26px; }
.liste-offre li::before { content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 12px; background: var(--bleu); border: 2px solid var(--encre); }
.liste-offre strong { font-weight: 800; }
.offre .bouton { margin-top: auto; }
.offre-note { margin-top: auto; padding-top: 14px; border-top: 3px solid var(--encre); width: 100%; font-size: 1rem; }
.concours { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 28px; margin-right: 7px; }
.concours h3 { font-size: 1.25rem; line-height: 1.25; }
.concours p { margin-top: 2px; }

/* ─── Le pied ─── */
.pied { background: var(--encre); color: #e5ebf2; font-size: 1rem; }
.pied a { color: var(--blanc); }
.pied-grille { display: grid; gap: 22px; padding-block: 18px 40px; }
.pied-marque { display: inline-flex; align-items: center; gap: 12px; color: var(--blanc); font-size: 1.5rem; font-weight: 800; text-decoration: none; }
.pied-marque img { width: 44px; height: 44px; border: 3px solid var(--blanc); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-weight: 700; }
.pied-liens a { display: inline-block; padding-block: 6px; }
.pied-mentions { display: grid; gap: 6px; max-width: 54em; font-size: .94rem; }
.pied h2 { font-size: 1rem; color: var(--blanc); }

/* ─── Les documents : conditions, confidentialité, contact ─── */
.page-doc { background: var(--page); }
.doc-bandeau { background: var(--bleu) var(--blocs) repeat-x top / 720px 40px; color: var(--blanc); }
.colonne { width: min(800px, 100%); margin-inline: auto; padding-inline: 16px; }
.doc-haut { padding-block: 52px 4px; }
.doc-haut h1 { margin-top: 16px; font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4rem); line-height: 1.03; letter-spacing: -.015em; text-shadow: 1.5px 1.5px 0 var(--encre), 3px 3px 0 var(--encre); }
.maj { margin-top: 14px; font-weight: 700; }
.doc-onglets { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; }
.doc-onglets a { display: inline-block; padding-block: 6px; color: var(--blanc); font-weight: 700; }
.doc-onglets a[aria-current="page"] { text-decoration-thickness: 3px; }
.doc { padding-block: 26px 60px; }
.doc h2 { margin-top: 2.1em; font-size: 1.55rem; line-height: 1.18; }
.doc h3 { font-size: 1.2rem; line-height: 1.25; }
.doc p, .doc ul { margin-top: .8em; }
.doc ul { padding-left: 1.25em; }
.doc li + li { margin-top: .5em; }
.doc a { color: #1f47bd; }
.encart { padding: 18px 20px; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 6px 6px 0 var(--encre); margin-right: 6px; }
.encart p { margin: 0; }
.fiche-donnee { margin-top: 18px; padding: 16px 18px; background: var(--blanc); border: 3px solid var(--encre); }
.fiche-donnee > p:first-of-type { margin-top: .35em; }
.fiche-donnee dl { margin: 12px 0 0; }
.fiche-donnee dt { margin-top: 12px; color: #1f47bd; font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.fiche-donnee dd { margin: 2px 0 0; }

/* Le formulaire de contact */
.formulaire { display: grid; gap: 18px; margin-top: 18px; }
.formulaire label { display: grid; gap: 6px; font-weight: 700; }
.formulaire label small { font-size: .92em; font-weight: 500; color: var(--doux); }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; padding: 12px 14px; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); border-radius: 0; font: inherit; font-weight: 500;
}
.formulaire textarea { min-height: 170px; resize: vertical; }
.formulaire .cache { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .mention { margin: 0; color: var(--doux); font-size: .95rem; }
.formulaire button { justify-self: start; }

/* ─── Une page courte : introuvable, merci ─── */
.page-courte { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--bleu); color: var(--blanc); }
.page-courte main { flex: 1; display: grid; align-content: center; gap: 16px; padding-block: 44px 32px; background: var(--bleu) var(--blocs) repeat-x top / 720px 40px; }
.page-courte h1 { font-size: clamp(2.5rem, 1.5rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -.015em; text-shadow: 1.5px 1.5px 0 var(--encre), 3px 3px 0 var(--encre); }
.relief-pied { flex: none; margin-top: 0; }
.page-courte p:not(.etiquette) { max-width: 34em; font-size: 1.15rem; }
.page-courte p a { color: var(--blanc); font-weight: 700; }
.page-courte .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding-right: 5px; }
.page-courte main > * { justify-self: start; }

/* ─── Les conditions et la confidentialité, au thème de Poulpi : l'aplat bleu, des titres blancs, des blocs blancs, un sommaire ─── */
.page-bleue { --cubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='290' height='620' shape-rendering='crispEdges'%3E%3Cpath d='M38 70h28v28H38zM214 34h16v16h-16zM126 214h36v36h-36zM246 306h20v20h-20zM26 392h16v16H26zM170 462h28v28h-28zM74 566h20v20H74z' fill='%2320252b' transform='translate(4 4)'/%3E%3Cpath d='M38 70h28v28H38zM214 34h16v16h-16zM126 214h36v36h-36zM246 306h20v20h-20zM26 392h16v16H26zM170 462h28v28h-28zM74 566h20v20H74z' fill='%238ec9f7'/%3E%3C/svg%3E"); background: var(--bleu); }
.doc-haut-logo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(84px, 20vw, 240px); gap: 8px 20px; align-items: center; padding-block: 56px 12px; }
.doc-logo { aspect-ratio: 1; overflow: hidden; }
.doc-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
.page-bleue .doc-onglets { align-items: center; gap: 6px 14px; margin-top: 14px; }
.page-bleue .doc-onglets a[aria-current="page"] { padding: 5px 10px; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); text-decoration: none; }
.doc-grille { display: grid; gap: 34px; padding-block: 18px 40px; }
.sommaire { margin-right: 6px; padding: 18px 20px; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); box-shadow: 6px 6px 0 var(--encre); }
.sommaire-titre { font-size: 1.3rem; font-weight: 800; }
.sommaire ol { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
.sommaire a { display: block; padding-block: 7px; color: var(--encre); font-weight: 700; line-height: 1.25; text-decoration: none; }
.sommaire a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.page-bleue .doc { min-width: 0; padding-block: 0; }
.page-bleue .encart { background: var(--ecume); color: var(--encre); }
.page-bleue .encart a { color: var(--encre); font-weight: 700; }
.bloc { margin-top: 40px; scroll-margin-top: 16px; }
.page-bleue .doc h2 { margin-top: 0; color: var(--blanc); font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem); line-height: 1.12; text-shadow: 1.5px 1.5px 0 var(--encre), 3px 3px 0 var(--encre); }
.bloc-corps { margin: 14px 6px 0 0; padding: 20px; background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); box-shadow: 6px 6px 0 var(--encre); overflow-wrap: break-word; }
.bloc-corps > :first-child { margin-top: 0; }
.bloc-corps code { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.doc-fin { height: 126px; background: var(--vague-encre) repeat-x left bottom / 240px 48px, var(--monts) repeat-x left bottom 22px / 960px 96px; }
@media (min-width: 980px) {
  .doc-grille { grid-template-columns: 290px minmax(0, 1fr); gap: 36px; align-items: start; background: var(--cubes) repeat-y 32px 420px / 290px 620px; }
  .sommaire { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .bloc-corps { padding: 24px 28px; }
}


/* Toolkit : ciel en blocs, bleu nuit et surfaces claires. */
:root { --encre: #141d52; --page: #eef2fb; --ecume: #e3eafb; --doux: #46507a; --bleu-fonce: #2848a8; }
body { background: var(--page); color: var(--encre); }
.entete { background: var(--bleu) url('/images/toolkit-ciel.svg') center / cover no-repeat; }
.marque { color: #fff; }
.marque img { border-color: #fff; box-shadow: 0 0 0 2px #ffffff55; border-radius: 10px; }
.bouton { border: 0; border-radius: 10px; box-shadow: none; }
.bouton:hover, .bouton:active { transform: none; box-shadow: none; }
.bouton-bleu { background: #141d52; color: #fff; }
.etiquette { border: 0; border-radius: 999px; box-shadow: none; }
.etiquette::before { display: none; }
.heros { background: var(--bleu) url('/images/toolkit-ciel.svg') center / cover no-repeat; }
.heros-poulpe img { object-fit: contain; transform: none; filter: drop-shadow(5px 5px 0 rgba(20,29,82,.4)); }
.section-ecume { background: #eef2fb; }
.section-bleue { background-color: #2848a8; }
.cadre img, .cadre-image, .fiche-empilee, .carte, .offre { border: 1px solid #d3dbf1; border-radius: 14px; box-shadow: 0 2px 8px rgba(20,29,82,.07); }
.carte { padding: 22px; }
.pied { background: #141d52; }
.pied-marque img { border: 0; border-radius: 10px; }
.page-courte.sur-bleu { background: #2848a8 url('/images/toolkit-ciel.svg') center / cover no-repeat; }
.page-doc .doc-bandeau { background: #2848a8 url('/images/toolkit-ciel.svg') center / cover no-repeat; }
@media (max-width: 759px) { .heros-grille { padding-top: 36px; } .heros-poulpe { width: min(42vw, 170px); } }
@media (min-width: 900px) { .heros-poulpe { justify-self:end; width:min(100%,250px); margin-left:auto; } }