/* C-Prévu — mystyle.css (complet)
   Sobriété, accessibilité (WCAG 2.2 AA), responsive, sans dépendances externes. */

/* ============================= */
/* 1) Variables (design tokens)  */
/* ============================= */
:root{
  /* Couleurs de base */
  --bg:#ffffff;
  --text:#111111;
  --muted:#555555;
  --link:#0645ad;
  --link-hover:#083a90;
  --focus:#ffbf47;

  /* Surfaces & bordures légères */
  --surface:rgba(0,0,0,.03);
  --border:rgba(0,0,0,.12);

  /* Nav “pills” chaleureuse */
  --nav-surface: rgba(255,191,71,0.18);
  --nav-hover:   rgba(6,69,173,0.12);
  --nav-active:  #0645ad;
  --nav-active-text: #ffffff;
  --nav-border:  rgba(0,0,0,.12);

  /* Typo & rythme */
  --container:72rem;
  --radius:16px;
  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --fs-400:1rem; --fs-500:1.125rem; --fs-600:1.25rem; --fs-700:1.6rem; --fs-800:2rem;
  --lh:1.6;
}

/* Mode sombre (respecte la préférence utilisateur) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --text:#f1f1f1; --muted:#b9b9b9;
    --link:#76b7ff; --link-hover:#9cc8ff; --focus:#ffd16b;
    --surface:rgba(255,255,255,.05); --border:rgba(255,255,255,.15);

    --nav-surface: rgba(255,209,107,0.18);
    --nav-hover:   rgba(118,183,255,0.18);
    --nav-active:  #76b7ff;
    --nav-active-text:#0f1115;
    --nav-border:  rgba(255,255,255,.15);
  }
}

/* ============================= */
/* 2) Reset léger & base         */
/* ============================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html:focus-within{ scroll-behavior:smooth; }

html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  font-size:var(--fs-400);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Liens lisibles et accessibles */
a{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:2px;
}
a:hover, a:focus{ color:var(--link-hover); }

/* Focus visible partout */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* Typo & blocs */
h1,h2,h3{ line-height:1.25; margin:var(--s4) 0 var(--s2); }
h1{ font-size:var(--fs-800); }
h2{ font-size:var(--fs-700); }
h3{ font-size:var(--fs-600); }
p,ul,ol,dl{ margin:0 0 var(--s3); }
ul,ol{ padding-left:1.25rem; }
abbr[title]{ text-decoration:underline dotted; cursor:help; }
.lead{ color:var(--muted); font-size:var(--fs-500); }

/* Conteneurs principaux centrés (pas d’obligation de classes) */
header, main, footer{
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

/* Lien d’évitement (visible au focus même sans CSS additionnel) */
a[href="#contenu"], a.skip-link{
  position:absolute; left:.5rem; top:.5rem;
  background:var(--focus); color:#000;
  padding:.5rem .75rem; border-radius:8px;
  transform: translateY(-200%);
  transition: transform .15s;
  z-index:1000;
}
a[href="#contenu"]:focus, a.skip-link:focus{ transform: translateY(0); }

/* ============================= */
/* 3) En-tête & navigation       */
/* ============================= */
/* Header chaleureux */
header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:.75rem;
  background: linear-gradient(180deg, rgba(255,191,71,.16), transparent 60%);
  border-bottom:1px solid var(--border);
}
@media (prefers-color-scheme: dark){
  header{ border-bottom-color: var(--border); }
}

/* Logo : l’HTML fournit width/height exacts ; ici on scale visuellement */
header > a{ display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; }
header > a > img{ display:block; height:60px; width:auto; }
@media (max-width:520px){ header > a > img{ height:48px; } }

/* Barre de nav “pills” (pas besoin de modifier le HTML) */
nav ul{
  display:flex; gap:.35rem; margin:0; padding:.25rem;
  list-style:none;
  background: var(--nav-surface);
  border:1px solid var(--nav-border);
  border-radius:999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05), 0 0 0 1px var(--nav-border) inset;
}
nav a{
  display:inline-block;
  padding:.55rem .95rem;
  border-radius:999px;
  text-decoration:none !important;   /* neutralise l’underline global */
  color: inherit;
  font-weight:600;
  line-height:1;
  transition: background .15s ease, transform .03s ease;
}
nav a:hover{ background: var(--nav-hover); }
nav a:active{ transform: translateY(1px); }
nav a[aria-current="page"]{
  background: var(--nav-active);
  color: var(--nav-active-text);
  text-decoration:none !important;
}
nav a:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  background: var(--nav-hover);
}

/* Petits écrans : la nav accepte le retour à la ligne */
@media (max-width:520px){
  nav ul{ flex-wrap:wrap; border-radius:14px; }
}

/* ============================= */
/* 4) Sections & composants      */
/* ============================= */
main{ padding: var(--s5) 0; }

/* Hero doux (optionnel) */
.hero{
  padding:var(--s5);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(6,69,173,.10), transparent 60%),
    radial-gradient(1000px 400px at 110% 10%, rgba(255,191,71,.20), transparent 60%),
    var(--surface);
}
.hero h1{ margin-top:0; }

/* Grilles & cartes légères */
.grid{ display:grid; gap:var(--s4); }
.grid-3{ grid-template-columns:1fr; }
@media (min-width:768px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

.card{
  padding:var(--s4);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}

/* Icônes SVG inline */
.icon{ width:40px; height:40px; display:inline-block; margin-bottom:var(--s2); }
.icon svg{ width:100%; height:100%; display:block; }

/* Listes de définitions (page contact) */
dl{ display:grid; grid-template-columns:10rem 1fr; gap:.25rem 1rem; }
dt{ font-weight:700; }
dd{ margin:0 0 var(--s2); }
address{ font-style:normal; }

/* ============================= */
/* 5) Confort & robustesse       */
/* ============================= */
/* Évite les débordements horizontaux */
img, video{ max-width:100%; height:auto; display:block; }
table{ width:100%; border-collapse:collapse; }

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Grille services : 1 col (mobile) → 2 cols (tablette) → 4 cols (desktop) */
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 600px){ .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Étire chaque carte pour des hauteurs alignées */
.grid-4 > .card,
.grid-2x2 > .card { height: 100%; }

/* Grille services : 1 col (mobile) → 2 cols partout */
.grid-2x2 { grid-template-columns: 1fr; }
@media (min-width: 600px){ .grid-2x2 { grid-template-columns: repeat(2, 1fr); } }