/* ============================================================================
   NathieDev — feuille de style unique du site
   ----------------------------------------------------------------------------
   Charte prélevée au pixel sur le logo d'origine (ChatGPT-Image, sept. 2025) :
     orange       #DE7A2F   le fond du logo
     rouge brique #AE201C   la lettre D
     crème        #F6E2C9   la lettre N
   Aucune dépendance, aucune 3D, aucun JavaScript nécessaire à l'affichage.
   ============================================================================ */

:root{
  --orange:#DE7A2F;
  --orange-fonce:#C4661F;
  --brique:#AE201C;
  --creme:#F6E2C9;

  --encre:#241A14;          /* texte principal, un brun très foncé et non un noir pur */
  --encre-2:#5E5148;        /* texte secondaire */
  --fond:#FFFDFA;           /* blanc légèrement chaud */
  --fond-2:#FBF4EC;         /* bandes alternées */
  --bord:#EADDCE;

  --rayon:18px;
  --largeur:1080px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--brique); text-underline-offset:3px; }
a:hover{ color:var(--orange-fonce); }

.enveloppe{ max-width:var(--largeur); margin:0 auto; padding:0 22px; }

/* ---------------------------------------------------------------- en-tête */

.entete{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,250,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bord);
}
.entete .enveloppe{
  display:flex; align-items:center; gap:20px;
  min-height:68px; flex-wrap:wrap;
}
.marque{
  display:flex; align-items:center; gap:11px;
  font-weight:800; font-size:18px; letter-spacing:-.02em;
  color:var(--encre); text-decoration:none; margin-right:auto;
}
.marque img{ width:34px; height:34px; border-radius:9px; display:block; }

.menu{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; }
.menu a{
  color:var(--encre-2); text-decoration:none; font-size:14.5px; font-weight:600;
  padding:6px 0; border-bottom:2px solid transparent;
}
.menu a:hover, .menu a[aria-current="page"]{ color:var(--brique); border-bottom-color:var(--orange); }

.langues{ display:flex; gap:4px; align-items:center; }
.langues a{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-decoration:none;
  color:var(--encre-2); padding:4px 9px; border-radius:999px; border:1px solid var(--bord);
}
.langues a[aria-current="true"]{ background:var(--orange); color:#fff; border-color:var(--orange); }

@media (max-width:720px){
  .entete .enveloppe{ min-height:0; padding-top:12px; padding-bottom:12px; }
  .marque{ margin-right:0; width:100%; }
  .menu{ gap:16px; flex-wrap:wrap; }
  .menu a{ font-size:13.5px; }
}

/* -------------------------------------------------------------------- hero */

.hero{
  background:
    radial-gradient(circle at 12% 0%, rgba(222,122,47,.20) 0%, transparent 52%),
    radial-gradient(circle at 88% 8%, rgba(174,32,28,.13) 0%, transparent 48%),
    var(--fond-2);
  border-bottom:1px solid var(--bord);
  padding:74px 0 78px;
}
.hero .surtitre{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brique);
  background:#fff; border:1px solid var(--bord); border-radius:999px;
  padding:7px 16px; margin-bottom:20px;
}
.hero h1{
  font-size:clamp(32px,5.4vw,52px); line-height:1.1; letter-spacing:-.03em;
  margin:0 0 18px; font-weight:800; max-width:16em;
}
.hero h1 em{ font-style:normal; color:var(--orange-fonce); }
.hero p.chapeau{
  font-size:clamp(17px,2.1vw,19.5px); color:var(--encre-2);
  max-width:44em; margin:0;
}

.boutons{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.bouton{
  display:inline-block; text-decoration:none; font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:14px;
  background:linear-gradient(135deg,var(--orange),var(--orange-fonce));
  color:#fff; border:1px solid var(--orange-fonce);
}
.bouton:hover{ color:#fff; filter:brightness(1.06); }
.bouton.secondaire{
  background:#fff; color:var(--brique); border:1px solid var(--bord);
}
.bouton.secondaire:hover{ border-color:var(--orange); color:var(--brique); }

/* ---------------------------------------------------------------- sections */

.section{ padding:66px 0; }
.section.alterne{ background:var(--fond-2); border-top:1px solid var(--bord); border-bottom:1px solid var(--bord); }

.section h2{
  font-size:clamp(24px,3.4vw,32px); line-height:1.2; letter-spacing:-.02em;
  margin:0 0 14px; font-weight:800;
}
.section > .enveloppe > p{ color:var(--encre-2); max-width:46em; }

.grille{ display:grid; gap:20px; margin-top:34px; }
.grille.trois{ grid-template-columns:repeat(3,1fr); }
.grille.quatre{ grid-template-columns:repeat(4,1fr); }
.grille.deux{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){
  .grille.trois, .grille.quatre{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .grille.trois, .grille.quatre, .grille.deux{ grid-template-columns:1fr; }
}

.carte{
  background:#fff; border:1px solid var(--bord); border-radius:var(--rayon);
  padding:26px 24px 28px;
}
/* Les icônes récupérées du WordPress ont des proportions très différentes
   (362x362, 471x324, 450x209). Hauteur fixe et largeur libre, sinon elles s'écrasent. */
.carte img.icone{ width:auto; height:44px; max-width:100%; margin-bottom:14px; display:block; }
.carte h3{ font-size:18.5px; margin:0 0 8px; font-weight:700; letter-spacing:-.01em; }
.carte p{ margin:0; color:var(--encre-2); font-size:15.5px; }
.carte .numero{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px; margin-bottom:12px;
  background:var(--creme); color:var(--brique); font-weight:800; font-size:15px;
}

/* --------------------------------------------------- cartes d'application */

.carte-app{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--bord); border-radius:var(--rayon);
  padding:24px; background:#fff;
}
.carte-app:hover{ border-color:var(--orange); color:inherit; }
.carte-app .pastille{
  /* display:block indispensable : un span reste inline et ignore width/height */
  display:block;
  width:38px; height:38px; border-radius:12px; margin-bottom:14px;
  border:1px solid rgba(0,0,0,.08);
}
.carte-app h3{ font-size:18px; margin:0 0 6px; font-weight:700; }
.carte-app p{ margin:0 0 12px; color:var(--encre-2); font-size:15px; }
.etiquette{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:4px 11px; border-radius:999px;
  border:1px solid var(--bord); color:var(--encre-2);
}
.etiquette.publiee{ background:var(--creme); color:var(--brique); border-color:#E7C9A6; }

/* -------------------------------------------------- contenu long (légal) */

.page-texte{ padding:52px 0 72px; }
.page-texte .enveloppe{ max-width:760px; }
.page-texte h1{
  font-size:clamp(28px,4.4vw,40px); line-height:1.15; letter-spacing:-.03em;
  margin:0 0 8px; font-weight:800;
}
.page-texte .maj{ color:var(--encre-2); font-size:14px; margin:0 0 30px; }
.page-texte h2{
  font-size:21px; margin:38px 0 10px; font-weight:700; letter-spacing:-.01em;
  padding-bottom:8px; border-bottom:1px solid var(--bord);
}
.page-texte h3{ font-size:17px; margin:26px 0 6px; font-weight:700; color:var(--brique); }
.page-texte p, .page-texte li{ color:var(--encre-2); }
.page-texte ul{ padding-left:22px; }
.page-texte li{ margin-bottom:7px; }
.page-texte strong{ color:var(--encre); font-weight:650; }

.encart{
  background:var(--fond-2); border:1px solid var(--bord); border-left:4px solid var(--orange);
  border-radius:14px; padding:18px 22px; margin:24px 0;
}
.encart p:first-child{ margin-top:0; }
.encart p:last-child{ margin-bottom:0; }

.tableau{ width:100%; border-collapse:collapse; margin:20px 0; font-size:15px; }
.tableau th, .tableau td{
  text-align:left; padding:11px 13px; border:1px solid var(--bord); vertical-align:top;
}
.tableau th{ background:var(--fond-2); font-weight:700; color:var(--encre); }
.tableau td{ color:var(--encre-2); }
.enroule{ overflow-x:auto; }

/* ------------------------------------- bloc coloré aux couleurs d'une app */
/* Chaque page d'application redéfinit --app-fond / --app-accent / --app-accent-fonce
   dans une balise <style> en tête de page. Le reste du site ne bouge pas. */

.bloc-app{
  --app-fond:#17101C; --app-accent:#E9A8BE; --app-accent-fonce:#A85F7C;
  --app-texte:#F7F3F5; --app-texte-2:rgba(247,243,245,.68);
  --app-carte:rgba(255,255,255,.055); --app-bord:rgba(255,255,255,.14);
  color:var(--app-texte);
  background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--app-accent) 17%, transparent) 0%, transparent 46%),
    radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--app-accent-fonce) 16%, transparent) 0%, transparent 44%),
    var(--app-fond);
  border-radius:26px; padding:38px 32px 42px; margin:28px 0;
}
@media (max-width:600px){ .bloc-app{ padding:28px 20px 32px; border-radius:20px; } }

.bloc-app .surtitre-app{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--app-accent);
  border:1px solid var(--app-bord); border-radius:999px; padding:6px 14px; margin-bottom:16px;
}
.bloc-app h2{
  color:var(--app-texte); font-size:27px; line-height:1.2; margin:0 0 6px;
  font-weight:800; letter-spacing:-.02em; border:0; padding:0;
}
.bloc-app h3{ color:var(--app-accent); font-size:17px; margin:28px 0 6px; font-weight:650; }
.bloc-app p, .bloc-app li{ color:var(--app-texte-2); }
.bloc-app strong{ color:var(--app-texte); font-weight:650; }
.bloc-app a{ color:var(--app-accent); text-decoration:underline; }
.bloc-app a:hover{ color:var(--app-accent); }
.bloc-app ul{ padding-left:22px; }
.bloc-app li{ margin-bottom:7px; }
.bloc-app .maj{ color:var(--app-texte-2); font-size:13px; margin:0 0 20px; }
.bloc-app .encart-app{
  background:var(--app-carte); border:1px solid var(--app-bord);
  border-radius:16px; padding:18px 20px; margin-top:20px;
}
.bloc-app .encart-app p:first-child{ margin-top:0; }
.bloc-app .separateur{ border:0; border-top:1px solid var(--app-bord); margin:36px 0 4px; }
.bloc-app .contact-app{
  display:inline-block; margin-top:14px;
  background:linear-gradient(135deg,var(--app-accent),var(--app-accent-fonce));
  color:#1B0F16; text-decoration:none; font-weight:700; font-size:14.5px;
  padding:13px 24px; border-radius:15px;
}
.bloc-app .contact-app:hover{ color:#1B0F16; filter:brightness(1.06); }

/* ------------------------------------------------------------- pied de page */

.pied{
  background:var(--encre); color:rgba(255,255,255,.72);
  padding:52px 0 30px; margin-top:0; font-size:15px;
}
.pied a{ color:rgba(255,255,255,.82); text-decoration:none; }
.pied a:hover{ color:var(--orange); }
.pied h2{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--creme); margin:0 0 14px; font-weight:700;
}
.pied ul{ list-style:none; margin:0; padding:0; }
.pied li{ margin-bottom:8px; }
.pied .colonnes{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
@media (max-width:760px){ .pied .colonnes{ grid-template-columns:1fr; gap:28px; } }
.pied .bas{
  margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13);
  font-size:13.5px; color:rgba(255,255,255,.5);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.pied .marque-pied{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.pied .marque-pied img{ width:38px; height:38px; border-radius:10px; }
.pied .marque-pied span{ font-weight:800; font-size:17px; color:#fff; }

/* --------------------------------------------------------------- divers */

.saut-contenu{
  position:absolute; left:-9999px;
  background:var(--orange); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
}
.saut-contenu:focus{ left:0; top:0; z-index:100; color:#fff; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:4px; }