@charset "UTF-8";
/* ==========================================================================
   Cardoso Nettoyages Sàrl : feuille de style
   Fond blanc. Azur #28aae2 (couleur signature relevée sur l'ancien site et
   sur le flocage des véhicules), rouge #e2001a réservé au logo.
   ========================================================================== */

:root{
  /* Surfaces */
  --blanc:#ffffff;
  --wash:#f4f8fb;
  --wash-2:#eaf3f9;
  --ligne:#dce7ef;
  --ligne-forte:#c3d6e3;

  /* Encre */
  --encre:#10222e;
  --encre-2:#42606f;
  --encre-3:#6d8797;

  /* Marque */
  --azur:#28aae2;
  --azur-fonce:#1585bb;
  --azur-nuit:#0b4a6e;
  --azur-pale:#e8f6fd;
  --rouge:#e2001a;
  --vert-wa:#25d366;
  --vert-wa-fonce:#1da851;

  --ombre-s:0 1px 2px rgba(16,34,46,.06), 0 2px 8px rgba(16,34,46,.05);
  --ombre-m:0 2px 6px rgba(16,34,46,.07), 0 12px 32px rgba(16,34,46,.09);
  --ombre-l:0 8px 24px rgba(16,34,46,.10), 0 30px 64px rgba(16,34,46,.12);

  --rayon:14px;
  --rayon-s:9px;
  --max:1220px;
  --gouttiere:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:96px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--blanc);
  color:var(--encre);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0;
  line-height:1.12;
  letter-spacing:-.022em;
  font-weight:750;
  text-wrap:balance;
  color:var(--encre);
}
h1{font-size:clamp(2.1rem,1.35rem + 3.1vw,3.9rem);letter-spacing:-.032em}
h2{font-size:clamp(1.62rem,1.15rem + 1.9vw,2.6rem);letter-spacing:-.028em}
h3{font-size:clamp(1.12rem,1rem + .48vw,1.34rem);letter-spacing:-.016em;font-weight:700}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--azur-fonce);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--azur-nuit)}

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

.enveloppe{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.etroit{max-width:78ch}

/* Lien d'évitement ------------------------------------------------------- */
.evitement{
  position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--azur-nuit);color:#fff;padding:12px 20px;border-radius:0 0 8px 8px;
  font-weight:650;text-decoration:none;transition:top .18s;
}
.evitement:focus{top:0;color:#fff}

/* ==========================================================================
   Barre supérieure
   ========================================================================== */
.bandeau{
  background:var(--azur-nuit);
  color:#dff1fb;
  font-size:.83rem;
  letter-spacing:.005em;
}
.bandeau .enveloppe{
  display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;
  min-height:40px;padding-block:7px;
}
.bandeau a{color:#fff;text-decoration:none;font-weight:600}
.bandeau a:hover{text-decoration:underline;color:#fff}
.bandeau-fren{display:flex;align-items:center;gap:8px;line-height:1.35}
.bandeau-fren b{font-weight:750;color:#fff}
.bandeau-droite{margin-left:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bandeau-tel{font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:800px){
  .bandeau-fren{font-size:.78rem}
  .bandeau-droite{margin-left:0}
}

/* ==========================================================================
   En-tête
   ========================================================================== */
.entete{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ligne);
}
.entete .enveloppe{display:flex;align-items:center;gap:20px;min-height:74px;padding-block:11px}

.logo{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto}
.logo img{height:30px;width:auto}
.logo-baseline{
  display:none;font-size:.68rem;line-height:1.35;color:var(--encre-3);
  width:15.5em;font-weight:600;letter-spacing:.005em;
  padding-left:14px;border-left:1px solid var(--ligne);
}
/* La baseline reste masquée dans l'en-tête : avec 8 rubriques, le sélecteur de
   langue et le bouton devis, elle poussait le contenu hors de la colonne. Elle
   est reprise en toutes lettres dans le pied de page. */

.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{
  display:block;padding:9px 13px;border-radius:8px;
  font-size:.925rem;font-weight:600;color:var(--encre-2);text-decoration:none;
  transition:background .16s,color .16s;white-space:nowrap;
}
.nav a:hover{background:var(--wash);color:var(--encre)}
.nav a[aria-current="page"]{color:var(--azur-nuit);background:var(--azur-pale)}

.entete-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}

/* Sélecteur de langue ---------------------------------------------------- */
.langues{position:relative}
.langues-bouton{
  display:flex;align-items:center;gap:7px;
  font:inherit;font-size:.83rem;font-weight:700;letter-spacing:.04em;
  padding:8px 11px;border:1px solid var(--ligne-forte);border-radius:8px;
  background:#fff;color:var(--encre-2);cursor:pointer;transition:.16s;
}
.langues-bouton:hover{border-color:var(--azur);color:var(--azur-nuit)}
.langues-bouton svg{width:11px;height:11px;transition:transform .18s}
.langues[data-ouvert="true"] .langues-bouton svg{transform:rotate(180deg)}
.langues-liste{
  position:absolute;top:calc(100% + 7px);right:0;min-width:158px;
  background:#fff;border:1px solid var(--ligne);border-radius:11px;
  box-shadow:var(--ombre-m);padding:6px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:60;
}
.langues[data-ouvert="true"] .langues-liste{opacity:1;visibility:visible;transform:none}
.langues-liste a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:7px;font-size:.9rem;font-weight:600;
  color:var(--encre-2);text-decoration:none;
}
.langues-liste a:hover{background:var(--wash);color:var(--encre)}
.langues-liste a[aria-current="true"]{color:var(--azur-nuit);background:var(--azur-pale)}
.langues-liste .code{font-size:.7rem;letter-spacing:.09em;color:var(--encre-3);font-weight:700}

/* Bouton hamburger ------------------------------------------------------- */
.burger{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;
  border:1px solid var(--ligne-forte);border-radius:9px;background:#fff;
  color:var(--encre);cursor:pointer;
}
.burger span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.2s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;border-radius:2px;transition:.2s;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1199px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:0 0 auto;top:var(--haut-entete,114px);
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--ligne);
    padding:14px var(--gouttiere) 22px;margin:0;
    box-shadow:var(--ombre-m);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.2s;
    max-height:calc(100dvh - var(--haut-entete,114px));overflow-y:auto;
  }
  .nav[data-ouvert="true"]{transform:none;opacity:1;visibility:visible}
  .nav a{padding:13px 12px;font-size:1.02rem;border-radius:9px}
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:10px;border:1.5px solid transparent;
  font-size:.95rem;font-weight:700;letter-spacing:.004em;
  text-decoration:none;cursor:pointer;font-family:inherit;
  transition:background .17s,border-color .17s,color .17s,transform .1s,box-shadow .17s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:0 0 auto}

.btn-primaire{background:var(--azur-nuit);color:#fff;box-shadow:var(--ombre-s)}
.btn-primaire:hover{background:#093a58;color:#fff;box-shadow:var(--ombre-m)}
.btn-azur{background:var(--azur);color:#06344e}
.btn-azur:hover{background:var(--azur-fonce);color:#fff}
.btn-wa{background:var(--vert-wa);color:#08331b}
.btn-wa:hover{background:var(--vert-wa-fonce);color:#fff}
.btn-contour{background:#fff;border-color:var(--ligne-forte);color:var(--encre)}
.btn-contour:hover{border-color:var(--azur);color:var(--azur-nuit);background:var(--azur-pale)}
.btn-clair{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);color:#fff}
.btn-clair:hover{background:#fff;color:var(--azur-nuit);border-color:#fff}
.btn-l{padding:16px 28px;font-size:1.01rem}
.btn-bloc{width:100%}

/* --- Ajustements d'en-tête -------------------------------------------------
   Ces règles viennent APRÈS .btn à dessein : « display:inline-flex » de .btn a
   la même spécificité et gagnerait s'il était déclaré plus bas.

   L'en-tête garde EXACTEMENT le même conteneur que le reste de la page
   (var(--max)), pour que le logo soit aligné sur le contenu qui suit et que
   les marges gauche et droite soient identiques. Le contenu doit donc tenir
   dedans : c'est le rôle des règles ci-dessous. */
/* Le conteneur de l'en-tête est un peu plus large que celui du contenu : il
   doit loger 8 rubriques, le sélecteur de langue et le bouton devis. Il reste
   CENTRÉ, donc les marges gauche et droite sont rigoureusement identiques. */
.entete .enveloppe{max-width:1400px}

/* Le bouton « devis » n'apparaît que s'il reste la place pour lui SANS pousser
   le menu hors de la colonne. En dessous, la barre fixe en bas d'écran et la
   rubrique « Contact » prennent le relais. */
@media (max-width:1439px){
  .entete-actions .devis-entete{display:none}
}
/* Le menu tient sur une ligne à partir de 1200 px ; en dessous, c'est le
   menu déroulant qui prend le relais. */
@media (min-width:1200px) and (max-width:1560px){
  .nav{gap:0}
  .nav a{padding-inline:10px;font-size:.885rem}
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding-block:clamp(46px,5.4vw,76px)}
.section-wash{background:var(--wash);border-block:1px solid var(--ligne)}
.section-serree{padding-block:clamp(34px,4vw,52px)}

.titre-section{max-width:64ch;margin-bottom:clamp(24px,2.6vw,36px)}
.titre-section p{margin-top:15px;color:var(--encre-2);font-size:1.06rem;max-width:62ch}

.oeil{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.73rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--azur-fonce);margin-bottom:15px;
}
.oeil::before{content:"";width:26px;height:2px;background:var(--azur);border-radius:2px}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;background:var(--azur-nuit);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(105deg, rgba(7,42,64,.94) 0%, rgba(7,42,64,.80) 40%, rgba(7,42,64,.34) 72%, rgba(7,42,64,.20) 100%),
    linear-gradient(to top, rgba(7,42,64,.55), transparent 55%);
}
.hero .enveloppe{position:relative;z-index:2;padding-block:clamp(54px,7.6vw,98px)}
.hero-texte{max-width:min(46ch,62%)}
@media (max-width:1100px){.hero-texte{max-width:100%}}
.hero h1{color:#fff}
.hero .oeil{color:#8fd8fa}
.hero .oeil::before{background:#8fd8fa}
.hero-chapo{margin-top:22px;font-size:clamp(1.04rem,.95rem + .45vw,1.24rem);color:#d6ebf7;max-width:48ch;line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}

.hero-chiffres{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.19);
  background:rgba(4,30,47,.42);
  backdrop-filter:blur(3px);
}
.hero-chiffres ul{
  list-style:none;margin:0;padding-block:26px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.hero-chiffres b{display:block;font-size:clamp(1.2rem,1rem + .95vw,1.72rem);font-weight:780;color:#fff;letter-spacing:-.02em;line-height:1.15}
.hero-chiffres span{display:block;margin-top:5px;font-size:.855rem;color:#b8dcf0;line-height:1.4}
@media (max-width:760px){
  .hero-chiffres ul{grid-template-columns:repeat(2,1fr);gap:20px 18px}
}

/* En-tête de page intérieure -------------------------------------------- */
.entete-page{
  background:linear-gradient(160deg,var(--azur-pale),var(--wash) 62%,#fff);
  border-bottom:1px solid var(--ligne);
  padding-block:clamp(32px,3.8vw,52px);
}
.entete-page h1{max-width:20ch}
.entete-page p{margin-top:16px;max-width:62ch;color:var(--encre-2);font-size:1.08rem}

/* Fil d'Ariane ----------------------------------------------------------- */
.ariane{font-size:.83rem;color:var(--encre-3);margin-bottom:15px}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.ariane li:not(:last-child)::after{content:"›";margin-left:7px;color:var(--ligne-forte)}
.ariane a{color:var(--encre-3);text-decoration:none}
.ariane a:hover{color:var(--azur-fonce);text-decoration:underline}
.ariane [aria-current]{color:var(--encre-2);font-weight:600}

/* ==========================================================================
   Grilles et cartes
   ========================================================================== */
.grille{display:grid;gap:clamp(16px,2vw,24px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.carte{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:clamp(20px,2.3vw,28px);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.carte-lien{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.carte-lien:hover{border-color:var(--azur);box-shadow:var(--ombre-m);transform:translateY(-2px);color:inherit}
.carte h3{margin-bottom:9px}
.carte p{color:var(--encre-2);font-size:.955rem}

.carte-num{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;margin-bottom:15px;
  background:var(--azur-pale);color:var(--azur-nuit);
  font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;
}

/* Cartes de prestation ---------------------------------------------------
   Les cartes d'une même rangée doivent avoir la même hauteur et leur lien doit
   être aligné en bas, quelle que soit la longueur du titre ou du texte. */
.carte-presta{
  overflow:hidden;padding:0;background:#fff;
  border:1px solid var(--ligne);border-radius:var(--rayon);
  display:flex;flex-direction:column;
  transition:border-color .18s,box-shadow .18s;
}
.carte-presta:hover{border-color:var(--azur);box-shadow:var(--ombre-m)}
.carte-presta .corps{display:flex;flex-direction:column;flex:1}
.carte-presta h3{min-height:2.4em;display:flex;align-items:flex-end}
.carte-presta .plus{margin-top:auto}
.carte-presta .vignette{aspect-ratio:16/10;overflow:hidden;background:var(--wash-2)}
.carte-presta .vignette img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.carte-presta:hover .vignette img{transform:scale(1.045)}
.carte-presta .corps{padding:20px 22px 24px}
.carte-presta h3{margin-bottom:7px}
.carte-presta .note{font-size:.83rem;color:var(--encre-3);font-style:italic;display:block;margin-bottom:9px}
.carte-presta p{font-size:.94rem;color:var(--encre-2)}
.carte-presta .plus{
  display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  font-size:.9rem;font-weight:700;color:var(--azur-fonce);text-decoration:none;
}
.carte-presta .plus:hover{gap:11px;color:var(--azur-nuit)}
.carte-presta .plus svg{width:14px;height:14px;transition:transform .18s}

/* Prestation détaillée --------------------------------------------------- */
.presta{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,44px);align-items:start;
  padding-block:clamp(30px,3.4vw,46px);
  border-top:1px solid var(--ligne);
  scroll-margin-top:110px;
}
.presta:first-of-type{border-top:0;padding-top:0}
.presta:nth-of-type(even) .presta-media{order:-1}
@media (max-width:900px){
  .presta{grid-template-columns:1fr;gap:24px}
  .presta:nth-of-type(even) .presta-media{order:0}
}
.presta-titre{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.presta-titre .note{font-size:.87rem;color:var(--encre-3);font-style:italic}
.presta-corps p{color:var(--encre-2);margin-top:14px}
.presta-corps p:first-child{margin-top:0}
.presta-media img{border-radius:var(--rayon);box-shadow:var(--ombre-s);width:100%}
.presta-index{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azur-fonce);margin-bottom:9px;display:block;
}

/* Sommaire ancré --------------------------------------------------------- */
.sommaire{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:18px 0 4px;
}
.sommaire a{
  display:inline-block;padding:8px 15px;border-radius:100px;
  background:#fff;border:1px solid var(--ligne-forte);
  font-size:.87rem;font-weight:600;color:var(--encre-2);text-decoration:none;
  transition:.16s;
}
.sommaire a:hover{border-color:var(--azur);background:var(--azur-pale);color:var(--azur-nuit)}

/* ==========================================================================
   Bandes de contenu
   ========================================================================== */
.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,48px);align-items:center;
}
@media (max-width:900px){.duo{grid-template-columns:1fr;gap:28px}}
.duo-media img{border-radius:var(--rayon);box-shadow:var(--ombre-m);width:100%}
.duo-texte p{color:var(--encre-2);margin-top:16px}

/* Liste à coches --------------------------------------------------------- */
.coches{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.coches li{position:relative;padding-left:31px;color:var(--encre-2)}
.coches li::before{
  content:"";position:absolute;left:0;top:.44em;
  width:17px;height:17px;border-radius:50%;
  background:var(--azur-pale);
  box-shadow:inset 0 0 0 1.5px var(--azur);
}
.coches li::after{
  content:"";position:absolute;left:5.4px;top:.72em;
  width:6px;height:3.2px;border-left:1.9px solid var(--azur-nuit);border-bottom:1.9px solid var(--azur-nuit);
  transform:rotate(-45deg);
}
.coches b{color:var(--encre);font-weight:700}

/* Encadré fort ----------------------------------------------------------- */
.encart{
  background:var(--azur-pale);
  border:1px solid #bfe4f7;
  border-left:4px solid var(--azur);
  border-radius:var(--rayon-s);
  padding:20px 24px;
  color:var(--azur-nuit);
  font-weight:650;
}
.encart p+p{margin-top:9px}
.encart .fin{font-weight:500;font-size:.9rem;color:var(--encre-2);margin-top:7px}

.citation{
  font-size:clamp(1.24rem,1.05rem + .85vw,1.8rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.28;
  color:var(--azur-nuit);text-wrap:balance;
}

/* Compteurs -------------------------------------------------------------- */
.compteurs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:760px){.compteurs{grid-template-columns:repeat(2,1fr)}}
.compteurs li{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);padding:22px}
.compteurs b{display:block;font-size:clamp(1.34rem,1.1rem + 1.1vw,1.95rem);font-weight:780;color:var(--azur-nuit);letter-spacing:-.025em;line-height:1.1}
.compteurs span{display:block;margin-top:7px;font-size:.89rem;color:var(--encre-2);line-height:1.42}

/* ==========================================================================
   Galerie
   ========================================================================== */
.galerie{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
.galerie figure{margin:0;position:relative;border-radius:var(--rayon-s);overflow:hidden;background:var(--wash-2);border:1px solid var(--ligne)}
.galerie button{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  aspect-ratio:4/3;
}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.galerie figure:hover img{transform:scale(1.05)}
.galerie figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 11px;
  background:linear-gradient(to top,rgba(6,32,48,.88),transparent);
  color:#fff;font-size:.83rem;font-weight:600;line-height:1.35;
  pointer-events:none;
}

/* Visionneuse ------------------------------------------------------------ */
.visionneuse{
  position:fixed;inset:0;z-index:200;border:0;padding:0;
  width:100%;height:100%;max-width:100%;max-height:100%;
  background:rgba(6,22,32,.94);
}
.visionneuse::backdrop{background:rgba(6,22,32,.94)}
.visionneuse-corps{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:56px 16px 22px;
}
.visionneuse img{max-width:min(1100px,94vw);max-height:78vh;width:auto;border-radius:8px;box-shadow:var(--ombre-l)}
.visionneuse-legende{color:#cfe6f3;font-size:.92rem;text-align:center;max-width:60ch}
.visionneuse-fermer,.visionneuse-prec,.visionneuse-suiv{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:.16s;
}
.visionneuse-fermer:hover,.visionneuse-prec:hover,.visionneuse-suiv:hover{background:#fff;color:var(--encre)}
.visionneuse-fermer{top:16px;right:16px;font-size:1.3rem;line-height:1}
.visionneuse-prec{left:14px;top:50%;transform:translateY(-50%)}
.visionneuse-suiv{right:14px;top:50%;transform:translateY(-50%)}
.visionneuse-compteur{position:absolute;top:22px;left:20px;color:#9ec8dd;font-size:.85rem;font-variant-numeric:tabular-nums}

/* ==========================================================================
   Bon cadeau
   ========================================================================== */
.bon{
  background:#fff;border:2px solid var(--azur);border-radius:var(--rayon);
  padding:clamp(22px,3vw,34px);box-shadow:var(--ombre-m);max-width:560px;
}
.bon-entete{border-bottom:1px dashed var(--ligne-forte);padding-bottom:16px;margin-bottom:18px}
.bon-intitule{
  font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--azur-fonce);display:block;margin-bottom:7px;
}
.bon-nom{font-size:1.42rem;font-weight:780;color:var(--rouge);letter-spacing:-.02em;line-height:1.15}
.bon-adresse{font-size:.88rem;color:var(--encre-2);margin-top:5px}
.bon-lignes{display:grid;gap:15px}
.bon-ligne{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:end}
.bon-ligne span{font-size:.85rem;color:var(--encre-2);white-space:nowrap}
.bon-ligne i{display:block;border-bottom:1px dotted var(--ligne-forte);height:1.35em}
.bon-pied{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:15px;border-top:1px dashed var(--ligne-forte);
  font-size:.79rem;color:var(--encre-3);
}
.bon-pied b{color:var(--azur-nuit);font-weight:700}

.occasions{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.occasions li{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon-s);
  padding:20px 22px;color:var(--encre-2);
}
.occasions b{color:var(--encre);font-weight:750}

/* ==========================================================================
   Formulaire
   ========================================================================== */
.form-carte{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:clamp(22px,3vw,36px);box-shadow:var(--ombre-s);
}
.champs{display:grid;gap:17px;grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.champs{grid-template-columns:1fr}}
.champ{display:flex;flex-direction:column;gap:7px}
.champ-large{grid-column:1/-1}
.champ label{font-size:.875rem;font-weight:650;color:var(--encre)}
.champ .facultatif{font-weight:500;color:var(--encre-3)}
.champ .requis{color:var(--rouge)}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:.97rem;color:var(--encre);
  padding:12px 14px;border:1px solid var(--ligne-forte);border-radius:9px;
  background:#fff;width:100%;transition:border-color .16s,box-shadow .16s;
}
.champ textarea{min-height:142px;resize:vertical;line-height:1.55}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:#a9c6d8}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:0;border-color:var(--azur);box-shadow:0 0 0 3px rgba(40,170,226,.18);
}
.champ input[aria-invalid="true"],.champ textarea[aria-invalid="true"]{border-color:var(--rouge);box-shadow:0 0 0 3px rgba(226,0,26,.11)}
.champ .erreur{font-size:.83rem;color:var(--rouge);font-weight:600}

/* Pot de miel : invisible pour l'humain, atteignable par les robots. */
.pot-de-miel{
  position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;
}

.form-pied{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.form-note{font-size:.81rem;color:var(--encre-3);line-height:1.5;max-width:52ch}

.alerte{
  border-radius:var(--rayon-s);padding:16px 20px;margin-bottom:24px;
  border:1px solid;font-size:.94rem;
}
.alerte-erreur{background:#fff2f3;border-color:#f7c9cf;color:#8f0715}
.alerte-erreur b{display:block;margin-bottom:6px;font-size:1rem}
.alerte-erreur ul{margin:6px 0 0;padding-left:20px}
.alerte-succes{background:#eefaf1;border-color:#bde8ca;color:#0d5c29}

/* Bloc de coordonnées ---------------------------------------------------- */
.coords{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.coords li{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:start}
.coords .picto{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:11px;
  background:var(--azur-pale);color:var(--azur-nuit);
}
.coords .picto svg{width:20px;height:20px}
.coords h3{font-size:.79rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);margin-bottom:5px}
.coords p,.coords a{font-size:1rem;color:var(--encre);text-decoration:none;line-height:1.5}
.coords a:hover{color:var(--azur-fonce);text-decoration:underline}
.coords .fin{font-size:.85rem;color:var(--encre-3)}

/* ==========================================================================
   Appel à l'action
   ========================================================================== */
.cta{
  background:linear-gradient(135deg,var(--azur-nuit),#12658f 55%,var(--azur-fonce));
  color:#fff;border-radius:var(--rayon);
  padding:clamp(28px,3.4vw,44px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;
}
@media (max-width:820px){.cta{grid-template-columns:1fr}}
.cta h2{color:#fff}
.cta p{margin-top:13px;color:#cfe8f6;max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:11px}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied{background:#08202f;color:#a9c8da;font-size:.92rem;padding-block:clamp(38px,3.8vw,54px) 0}
.pied a{color:#dbeefa;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied-grille{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(26px,3.5vw,48px);padding-bottom:40px;
}
@media (max-width:900px){.pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pied-grille{grid-template-columns:1fr}}
.pied h3{font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#6f9ab4;margin-bottom:15px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pied-logo img{height:32px;width:auto;background:#fff;padding:7px 11px;border-radius:8px}
.pied-baseline{margin-top:15px;color:#8fb3c8;line-height:1.55;max-width:34ch;font-size:.88rem}
.pied-fren{
  margin-top:17px;padding:13px 15px;border-radius:9px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  font-size:.83rem;line-height:1.5;color:#c2dcec;
}
.pied-fren b{color:#fff;font-weight:750}
.pied-bas{
  border-top:1px solid rgba(255,255,255,.11);
  padding-block:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.83rem;color:#7fa5bb;
}

/* Bulle WhatsApp flottante ------------------------------------------------
   Visible sur ordinateur et tablette. Sur mobile, la barre d'action fixe en
   bas d'écran porte déjà WhatsApp : la bulle ferait doublon. */
.bulle-wa{
  position:fixed;right:22px;bottom:22px;z-index:95;
  display:flex;align-items:center;gap:0;
  height:58px;padding:0 15px;border-radius:29px;
  background:var(--vert-wa);color:#08331b;text-decoration:none;
  box-shadow:0 5px 16px rgba(16,34,46,.20), 0 14px 40px rgba(37,211,102,.28);
  transition:background .18s,color .18s,gap .22s cubic-bezier(.2,.7,.3,1),box-shadow .18s,transform .12s;
  overflow:hidden;
}
.bulle-wa svg{width:29px;height:29px;flex:0 0 auto}
.bulle-wa .texte{
  max-width:0;opacity:0;white-space:nowrap;
  font-size:.94rem;font-weight:700;line-height:1;
  transition:max-width .26s cubic-bezier(.2,.7,.3,1),opacity .2s;
}
.bulle-wa:hover,.bulle-wa:focus-visible{
  background:var(--vert-wa-fonce);color:#fff;gap:11px;
  box-shadow:0 7px 20px rgba(16,34,46,.24), 0 18px 48px rgba(37,211,102,.34);
}
.bulle-wa:hover .texte,.bulle-wa:focus-visible .texte{max-width:210px;opacity:1}
.bulle-wa:active{transform:translateY(1px)}

/* Pastille de rappel, discrète, qui attire l'œil une seule fois. */
.bulle-wa::after{
  content:"";position:absolute;top:11px;right:13px;
  width:9px;height:9px;border-radius:50%;background:#e2001a;
  box-shadow:0 0 0 2px var(--vert-wa);
  animation:pulse-wa 2.4s ease-out 3;
}
.bulle-wa:hover::after{display:none}
@keyframes pulse-wa{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:.65}
}
@media (max-width:720px){.bulle-wa{display:none}}
@media (prefers-reduced-motion:reduce){.bulle-wa::after{animation:none}}

/* Barre d'action mobile fixe --------------------------------------------- */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--ligne);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:8px;
  box-shadow:0 -3px 18px rgba(16,34,46,.09);
}
.barre-mobile .btn{flex:1;padding:12px 8px;font-size:.88rem;border-radius:9px}
@media (max-width:720px){
  .barre-mobile{display:flex}
  body{padding-bottom:74px}
}

/* Utilitaires ------------------------------------------------------------
   La CSP du site interdit les styles en ligne (style-src 'self', sans
   'unsafe-inline'). Toute mise en forme passe donc par une classe. */
.duo-haut{align-items:start}
.centre-bloc{margin-inline:auto;text-align:center;padding-block:clamp(20px,4vw,56px)}
.actions-centrees{justify-content:center}
.h2-moyen{font-size:1.4rem}
.h3-normal{font-size:1rem}
.texte-doux{color:var(--encre-2)}
.texte-fin{color:var(--encre-3)}
.texte-intro{color:var(--encre-2);font-size:1.08rem}
.texte-petit{color:var(--encre-2);font-size:.96rem}
.citation-azur{color:var(--azur-fonce)}
.cadre-photo{margin:0;border-radius:var(--rayon-s);overflow:hidden;border:1px solid var(--ligne)}
.pastille-ok{
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:#eefaf1;color:#0d5c29;margin-bottom:26px;
}

/* Utilitaires ------------------------------------------------------------ */
.invisible{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.centre{text-align:center}
.mt-s{margin-top:14px}
.mt-m{margin-top:26px}
.mt-l{margin-top:32px}

/* Impression ------------------------------------------------------------- */
@media print{
  .bandeau,.entete,.barre-mobile,.cta,.visionneuse,.evitement{display:none!important}
  body{font-size:11pt;padding:0}
  .hero{background:none;color:var(--encre)}
  .hero-media{display:none}
  .hero h1,.hero-chapo{color:var(--encre)}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}