/* ============================================================
   L'ACCUEIL — piste C « chaleureuse et ludique » (Tom, 2026-10-18).
   COPIE CONFORME de la feuille de la maquette
   (docs/maquettes-site/C-ludique.html du dépôt parent) : Tom veut la page
   « vraiment pareille », bureau et téléphone. Ne pas la réinterpréter ici :
   changer la maquette, puis recopier. Seule différence : les polices,
   auto-hébergées (la CSP refuse Google Fonts), les mêmes que style.css.
   Les autres pages gardent style.css.
   ============================================================ */

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("polices/fredoka-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: "Fredoka";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("polices/fredoka-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("polices/nunito-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: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("polices/nunito-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("polices/nunito-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Piste C — chaleureux et ludique : la palette actuelle du site (crème,
   pêche, corail, soleil, lagon, sable), des cartes à manipuler, et la
   preuve par l'exemple dès le héros. */
:root{
  --creme:#FFEFD0; --peche:#FFC9A0; --corail-clair:#FF9E80; --corail:#E8613C; --corail-fonce:#C2451F;
  --soleil:#FFC94F; --soleil-clair:#FFE1A0; --lagon:#3ECFBF; --lagon-fonce:#0E897A; --lagon-pale:#D4F4EF;
  --sable:#FCEBC4; --sable-ombre:#E7C99B; --encre:#33291F; --encre-douce:#7A6A5B; --blanc:#FFFDF8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--blanc);color:var(--encre);font-family:Nunito,system-ui,sans-serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:Fredoka,Nunito,sans-serif;font-weight:600;line-height:1.08;letter-spacing:-.01em}
.max{max-width:1200px;margin:0 auto;padding:0 40px}
.bouton{display:inline-block;font-weight:800;text-decoration:none;border-radius:999px;padding:16px 30px;font-size:19px;white-space:nowrap}
.bouton--plein{background:var(--corail);color:#fff;box-shadow:0 6px 0 var(--corail-fonce)}
.bouton--ligne{border:2.5px solid var(--encre);box-shadow:0 5px 0 var(--encre);background:#fff}

/* En-tête : une barre flottante en pilule */
/* Fond transparent : le crème est celui du héros, qui passe SOUS la barre
   (sinon la barre tranchait le soleil à sa hauteur — Tom, 2026-10-18). */
.haut{padding:22px 0 0;background:transparent;position:relative;z-index:2}
.barre{display:flex;align-items:center;gap:18px;background:#fff;border-radius:999px;padding:10px 12px 10px 14px;box-shadow:0 8px 24px rgba(51,41,31,.10)}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Fredoka,sans-serif;font-weight:600;font-size:22px}
.marque img{width:42px;height:42px;border-radius:12px;flex-shrink:0}
.marque{flex-shrink:0}
.barre nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.barre nav a{text-decoration:none;font-weight:700;padding:10px 16px;border-radius:999px;white-space:nowrap}
.barre nav .langue{background:var(--sable)}
.barre nav .plein{background:var(--corail);color:#fff}

/* Héros */
.heros{background:var(--creme);position:relative;overflow:hidden;margin-top:-90px;padding-top:90px}
.heros::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--soleil-clair);right:-120px;top:-170px}
.heros::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:var(--lagon);clip-path:path('M0,40 C240,90 480,0 720,30 C960,60 1200,90 1440,40 L1440,90 L0,90Z')}
/* Au-delà de 1440 px, le tracé (en px) s'arrêtait et laissait un rectangle
   crème à droite (Tom, 2026-10-18) : la même vague, en image qui s'étire. */
@media (min-width:1441px){.heros::after{clip-path:none;background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 90" preserveAspectRatio="none"%3E%3Cpath fill="%233ECFBF" d="M0,40 C240,90 480,0 720,30 C960,60 1200,90 1440,40 L1440,90 L0,90Z"/%3E%3C/svg%3E') center bottom/100% 100% no-repeat}}
.heros .max{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;padding-top:70px;padding-bottom:140px}
.pastille{display:inline-flex;gap:8px;align-items:center;background:#fff;border-radius:999px;padding:7px 16px;font-weight:800;font-size:15px;color:var(--lagon-fonce)}
.heros h1{font-size:72px;margin:20px 0 0}
.surligne{white-space:nowrap;background:linear-gradient(180deg,transparent 60%,var(--soleil) 60%);padding:0 6px;color:var(--corail-fonce)}
.heros .chapo{font-size:21px;color:var(--encre-douce);max-width:520px;margin:22px 0 32px}
.heros .note{font-size:15px;color:var(--encre-douce);margin-top:22px}

/* Le paquet de cartes */
.paquet{position:relative;height:500px}
.carte{position:absolute;background:#fff;border-radius:26px;box-shadow:0 18px 40px rgba(51,41,31,.16);padding:24px 26px}
.carte .langue-carte{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce)}
.carte .mot{font-family:Fredoka,sans-serif;font-weight:600;font-size:44px;line-height:1.1;margin-top:4px}
.carte .sens{color:var(--encre-douce);font-size:16px}
.c1{width:300px;left:10px;top:30px;transform:rotate(-7deg);background:var(--lagon-pale)}
.c2{width:300px;right:0;top:10px;transform:rotate(6deg);background:var(--sable)}
.c3{width:380px;left:60px;top:175px;padding:28px 30px}
.c3 .mot{font-size:68px}
.c3 .question{font-weight:800;margin:10px 0 12px}
.choix{display:flex;gap:10px;flex-wrap:wrap}
.choix span{border-radius:14px;padding:10px 16px;font-weight:800;font-size:17px}
.choix .oui{background:#D9EFE3;color:#0D4530}
.c3 .explique{font-size:15px;color:var(--encre-douce);margin:14px 0 0}
.autocollant{position:absolute;font-family:Fredoka,sans-serif;font-weight:600;text-align:center;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1.05}
.a1{width:118px;height:118px;background:var(--corail);color:#fff;right:-6px;top:330px;transform:rotate(12deg);font-size:20px}
.a1 b{font-size:40px;display:block}

/* Langues : deux rangées de pastilles */
.langues{background:var(--lagon);padding:20px 0 70px;color:#08443d}
.langues h2{font-size:40px;color:#fff;text-align:center}
.langues p{text-align:center;color:#fff;opacity:.92;margin:8px 0 26px}
.nuage{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:1060px;margin:0 auto}
.nuage span{background:#fff;border-radius:999px;padding:8px 16px 8px 10px;font-weight:700;font-size:16px;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.nuage i{font-style:normal;font-size:20px;min-width:24px;text-align:center}
.nuage .lettres i{font-family:Fredoka,sans-serif;font-size:15px;color:var(--lagon-fonce)}

/* Arguments */
.arguments{padding:100px 0 60px}
.arguments h2{font-size:52px;text-align:center}
.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
.arg{border-radius:30px;padding:34px 30px}
.arg:nth-child(1){background:var(--creme)}
.arg:nth-child(2){background:var(--lagon-pale)}
.arg:nth-child(3){background:#FFE3D6}
.arg .rond{width:72px;height:72px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:36px}
.arg h3{font-size:30px;margin:20px 0 10px}
.arg p{margin:0;color:var(--encre-douce)}

/* Aperçu : un éventail de téléphones */
.apercu{padding:60px 0 110px;text-align:center}
.apercu h2{font-size:52px}
.apercu .chapo{color:var(--encre-douce);margin:10px 0 0}
.eventail{display:flex;justify-content:center;align-items:flex-end;margin-top:60px;height:560px}
.tel{width:240px;background:var(--encre);padding:9px;border-radius:40px;box-shadow:0 26px 50px rgba(51,41,31,.24);flex:0 0 auto}
.tel img{border-radius:32px}
.eventail .t1{transform:rotate(-10deg) translate(60px,30px)}
.eventail .t2{transform:rotate(-3deg) translateY(-10px);z-index:2;width:270px}
.eventail .t3{transform:rotate(4deg) translateY(-10px);z-index:3;width:270px}
.eventail .t4{transform:rotate(11deg) translate(-60px,30px)}

/* Offres */
.offres{background:var(--sable);padding:100px 0 80px;position:relative}
.offres h2{font-size:52px;text-align:center}
.offres .chapo{text-align:center;color:var(--encre-douce);max-width:720px;margin:14px auto 0}
.offres .grille3{align-items:center;margin-top:60px}
.offre{background:#fff;border-radius:30px;padding:34px 30px;text-align:center;position:relative;box-shadow:0 10px 0 var(--sable-ombre)}
.offre.avant{padding:46px 30px;border:3px solid var(--corail);box-shadow:0 12px 0 var(--corail-fonce)}
.offre .ruban{position:absolute;top:-22px;left:50%;transform:translateX(-50%) rotate(-3deg);background:var(--soleil);font-family:Fredoka,sans-serif;font-weight:600;font-size:17px;padding:8px 18px;border-radius:999px;white-space:nowrap}
.offre h3{font-size:30px}
.offre .prix{font-family:Fredoka,sans-serif;font-weight:700;font-size:58px;color:var(--corail);margin:12px 0 4px;line-height:1}
.offre .prix small{font-size:20px;color:var(--encre-douce);font-weight:500}
.offre .detail{color:var(--encre-douce);margin:0;font-size:16px}
.offre .argu{font-weight:700;margin:18px 0 24px}
.offre .bouton{display:block;font-size:18px}
.offre .paiement{font-size:14px;color:var(--encre-douce);margin:16px 0 0}
.mentions{text-align:center;color:var(--encre-douce);font-size:15px;margin-top:44px}
.mentions p{margin:4px 0}

/* Final + pied */
.final{background:var(--corail);color:#fff;text-align:center;padding:90px 0 100px;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--soleil);opacity:.55;left:-80px;bottom:-140px}
.final .max{position:relative}
.final h2{font-size:58px}
.final p{font-size:20px;margin:14px 0 32px;opacity:.95}
.final .bouton{background:#fff;color:var(--corail-fonce);box-shadow:0 6px 0 var(--corail-fonce)}
.pied{background:var(--encre);color:var(--sable);padding:48px 0;text-align:center}
.pied img{width:52px;height:52px;border-radius:14px;margin:0 auto}
.pied .nom{font-family:Fredoka,sans-serif;font-size:24px;color:#fff;margin:10px 0 16px}
.pied nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.pied nav a{text-decoration:none;background:rgba(255,255,255,.08);border-radius:999px;padding:8px 16px;font-weight:700}
.pied .legal{font-size:14px;opacity:.75;margin:22px 0 0}

@media (max-width:760px){
  body{font-size:17px}
  .max{padding:0 16px}
  .haut{padding-top:14px}
  .heros{margin-top:-70px;padding-top:70px}
  .heros::before{top:-190px}
  .barre{gap:6px;padding:8px}
  .marque span{display:none}
  .marque img{width:38px;height:38px}
  .barre nav{gap:4px}
  .barre nav a{padding:9px 11px;font-size:14px}
  .barre nav .langue{font-size:0;padding:9px 12px}
  .barre nav .langue::after{content:"EN";font-size:14px}
  .heros .max{grid-template-columns:1fr;padding-top:44px;padding-bottom:110px;gap:10px}
  .heros h1{font-size:46px}
  .heros .chapo{font-size:18px}
  .heros .bouton--plein{display:block;text-align:center}
  .paquet{height:440px;margin-top:20px}
  .c1{width:220px;left:-6px;top:10px}
  .c2{width:220px;right:-6px;top:0}
  .c1 .mot{font-size:34px}
  .c2 .mot{font-size:27px;white-space:nowrap}
  .c3{width:auto;left:6px;right:6px;top:120px;padding-bottom:40px}
  .c3 .mot{font-size:56px}
  .a1{width:92px;height:92px;font-size:15px;right:-6px;top:auto;bottom:-24px}
  .a1 b{font-size:32px}
  .langues h2,.arguments h2,.apercu h2,.offres h2{font-size:36px}
  .grille3{grid-template-columns:1fr}
  .eventail{justify-content:flex-start;overflow-x:auto;height:auto;padding:20px 10px 30px;gap:16px;margin-top:30px}
  .eventail .tel{transform:none;width:220px}
  .offre.avant{order:-1}
  .offres .grille3{gap:40px}
  .final h2{font-size:40px}
  .final .bouton{white-space:normal}
}

/* Hors maquette (elle n'a pas de page anglaise) : sur téléphone, la pastille
   de langue de la page anglaise dit « FR », comme la française dit « EN ». */
@media (max-width:760px){
  .barre nav .langue--fr::after{content:"FR"}
}