/* =====================================================================
   Brancher - OrdiCloud
   Charte "Rhino" reprise d'ordicloud.com (creme / ambre / orange).
   Le noyau ci-dessous est la feuille d'ordicloud.com, sans les blocs
   boutique / panier. Les ajouts propres a Brancher sont en fin de fichier.
   Fichier ASCII pur.
   ===================================================================== */

/* =====================================================================
   OrdiCloud - Theme " Rhino " (sept. 2026)
   Site public + boutique. Palette creme / ambre / orange.
   Typos : Anton (titres), Permanent Marker (accents), Space Mono (labels),
           Hanken Grotesk (corps). Chargees depuis inc/entete.php.
   Ce fichier restyle les classes existantes : aucune page PHP a reecrire.
   ===================================================================== */

:root{
  /* Charte rhino */
  --cream:#F4F0E6; --cream-2:#EDE7D8; --cream-3:#F8F5EE;
  --ink:#1A1815; --ink-soft:#4a453c;
  --amber:#F0A92C; --amber-2:#E5991A; --orange:#DD6E2C;
  --amber-clair:#F5D9A0;
  --bord:#E2DBC9; --bord-fort:#D8CFB6;

  /* Typos */
  --disp:'Anton',Impact,sans-serif;
  --brush:'Permanent Marker',cursive;
  --mono:'Space Mono',ui-monospace,monospace;
  --sans:'Hanken Grotesk',system-ui,'Segoe UI',Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --rayon:4px; --rayon-carte:8px;
  --large:1180px;

  /* Anciennes variables conservees (compat retro avec le CSS restant) */
  --encre:var(--ink); --encre-2:var(--ink-soft);
  --or:var(--amber); --or-fonce:var(--orange);
  --creme:var(--cream); --creme-bord:var(--bord);
  --gris:var(--ink-soft); --gris-clair:#8b857a;
  --blanc:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--amber);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

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

/* ---------------------------------------------------------------------
   GOOGLE TRANSLATE - masque completement la barre officielle
   (la traduction FR/EN se fait via les boutons du menu, sans bandeau)
   --------------------------------------------------------------------- */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.skiptranslate iframe,
#goog-gt-tt,
.goog-te-balloon-frame{display:none!important}
body{top:0!important;position:static!important}
.goog-tooltip,.goog-tooltip:hover{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
#google_translate_element{display:none!important}

/* ---------------------------------------------------------------------
   EN-TETE
   --------------------------------------------------------------------- */
.site-entete{
  background:var(--cream);
  position:sticky;top:0;z-index:60;
  border-bottom:2px solid var(--ink);
}
.site-entete .contenu{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;min-height:70px;
}
.entete-gauche{display:flex;align-items:center;gap:14px}
.site-logo{display:flex;align-items:center}
.site-logo img{height:48px;width:auto;display:block}
.entete-slogan{
  display:flex;flex-direction:column;gap:1px;
  padding-left:14px;border-left:2px solid var(--amber);
}
.slogan-txt{
  font-family:var(--brush);color:var(--orange);
  font-size:18px;line-height:1;transform:rotate(-3deg);
}
.slogan-tel{
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);
  letter-spacing:.02em;
}

/* Navigation */
.site-nav{display:flex;align-items:center;gap:16px;flex:1;min-width:0;margin-left:26px}
.site-nav > a{
  font-family:var(--sans);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink);opacity:.72;white-space:nowrap;
  transition:opacity .2s var(--ease);padding:4px 0;
  border-bottom:2px solid transparent;
}
.site-nav > a:hover{opacity:1}
.site-nav > a.actif{opacity:1;border-bottom-color:var(--amber)}

/* Bouton compte / panier */
.btn-compte,.btn-panier{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--sans);font-weight:600;font-size:12px;
  padding:7px 13px;border-radius:var(--rayon);
  border:2px solid var(--ink);color:var(--ink);
  background:var(--cream-3);cursor:pointer;position:relative;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s;
}
.btn-panier{background:var(--amber)}
.btn-compte:hover,.btn-panier:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn-compte:active,.btn-panier:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn-compte svg,.btn-panier svg{width:15px;height:15px}
.panier-pastille{
  background:var(--orange);color:#fff;border-radius:9px;
  padding:1px 7px;font-family:var(--mono);font-size:11px;font-weight:700;
  border:1.5px solid var(--ink);
}

/* Bascule langue */
.btn-langue{font-family:var(--mono);font-size:12px;letter-spacing:.03em;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.btn-langue a{opacity:.7;transition:opacity .2s}
.btn-langue a:hover{opacity:1}
.lang-sep{opacity:.4;margin:0 3px}

/* Bandeau client connecte */
.entete-client{
  display:flex;flex-direction:column;line-height:1.2;text-align:right;
  font-family:var(--mono);font-size:11px;color:var(--ink-soft);
  border-right:2px solid var(--amber);padding-right:12px;margin-right:2px;
}
.entete-client .ec-cie{font-weight:700;color:var(--ink)}

/* Icones mobiles (cachees sur desktop) */
.entete-icones-mobile{display:none;gap:12px;align-items:center}
.ico-mob{position:relative;color:var(--ink)}
.ico-mob svg{width:24px;height:24px}

/* Hamburger */
.menu-btn{
  display:none;width:42px;height:42px;border:2px solid var(--ink);
  background:var(--cream-3);border-radius:var(--rayon);cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:9px;
}
.menu-btn span{height:3px;width:100%;background:var(--ink);border-radius:3px;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.menu-btn.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------------------------------------------------------------------
   BOUTONS generiques
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:14px;
  padding:12px 24px;border-radius:var(--rayon);
  border:2px solid var(--ink);background:var(--amber);color:var(--ink);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s var(--ease);
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.dark,.btn-encre{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-or{background:var(--amber)}
.btn-orange{background:var(--orange);color:#fff}
.btn-ligne,.btn.btn-ligne{background:transparent;box-shadow:none}
.btn-ligne:hover{background:var(--cream-3);box-shadow:2px 2px 0 var(--ink)}
.btn-sm{padding:8px 15px;font-size:13px;box-shadow:2px 2px 0 var(--ink)}
.btn-bloc{width:100%;justify-content:center}
button.btn{font:600 14px var(--sans)}

/* ---------------------------------------------------------------------
   HERO / accueil
   --------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  padding:70px clamp(18px,5vw,70px) 40px;
  background:linear-gradient(160deg,#EFEADD 0%,#F2EDE1 45%,var(--cream) 100%);
}
.hero .contenu{position:relative;z-index:3}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  align-items:center;gap:36px;min-height:clamp(420px,66vh,620px);
}
.hero-copy{position:relative;z-index:3;max-width:680px}
.hero h1{
  font-family:var(--disp);font-size:clamp(2.6rem,6.4vw,5.6rem);
  line-height:.94;text-transform:uppercase;letter-spacing:.005em;color:var(--ink);
}
.h-line{display:block;overflow:hidden}
.h-line span{display:block;transform:translateY(110%)}
html.is-ready .h-line span{transform:none;transition:transform .9s var(--ease)}
html.is-ready .h-line:nth-child(2) span{transition-delay:.1s}
html.is-ready .h-line:nth-child(3) span{transition-delay:.2s}
.brush{
  font-family:var(--brush);color:var(--orange);
  font-size:clamp(1.8rem,5vw,3.4rem);line-height:1;display:inline-block;
  transform:rotate(-5deg);margin:14px 0 0 6px;
}
.hero .sub,.hero-sub{
  margin-top:24px;max-width:46ch;font-size:clamp(1rem,1.3vw,1.12rem);color:var(--ink-soft);
}
.hero-actions{margin-top:30px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* Rhino de la hero : PLUS PETIT + FADE (masque degrade) comme demande.
   Il decore a droite, derriere/a cote du texte, sans jamais gener la lecture. */
.rhino-wrap{
  position:relative;z-index:1;justify-self:end;
  width:100%;max-width:340px;margin-right:-8px;will-change:transform;
  /* fondu : plein a droite, transparent vers la gauche (cote texte) */
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 14%,#000 46%,#000 100%);
          mask-image:linear-gradient(100deg,transparent 0%,transparent 14%,#000 46%,#000 100%);
}
.rhino-bob{will-change:transform}
.rhino{width:100%;height:auto;filter:drop-shadow(0 18px 22px rgba(26,24,21,.18));opacity:.96;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .4s ease}
/* Le rhino charge au survol */
.rhino-wrap:hover .rhino{transform:translateX(-18px) rotate(-5deg) scale(1.05);
  filter:drop-shadow(0 22px 26px rgba(26,24,21,.26))}
.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px)}
.blob.b1{width:60%;padding-top:60%;background:radial-gradient(circle at 40% 40%,#F5B94A,var(--amber));right:4%;top:6%;opacity:.75}
.blob.b2{width:24%;padding-top:24%;background:var(--amber-2);left:6%;bottom:14%;opacity:.55}

/* ---------------------------------------------------------------------
   DIVIDERS ondules (reutilisables via <div class="divider ...">)
   --------------------------------------------------------------------- */
.divider{position:relative;line-height:0;z-index:4;margin-top:-2px}
.divider svg{display:block;width:100%;height:clamp(52px,7vw,110px)}
.div-cream3{color:var(--cream-3)}
.div-amber{color:var(--amber)}
.div-ink{color:var(--ink)}

/* ---------------------------------------------------------------------
   SECTIONS generiques
   --------------------------------------------------------------------- */
.section{padding:56px 0}
.section-creme{background:var(--cream)}
.section-creme3{background:var(--cream-3)}
.script-accent{
  font-family:var(--brush);font-size:clamp(1.6rem,4vw,2.6rem);color:var(--ink);
  display:inline-block;transform:rotate(-4deg);margin:0 0 6px 8px;
}

/* Grand titre "gradient flow" (bande de services etc.) */
.big-fill{font-family:var(--disp);text-transform:uppercase;line-height:1.06;letter-spacing:.004em}
.big-fill .ln{
  font-size:clamp(2rem,7.2vw,5.4rem);
  background:linear-gradient(100deg,#D9642A,#F0A92C 24%,#B84A2E 48%,#7C8B34 68%,#E0A030 100%);
  background-size:220% 220%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:flow 9s ease-in-out infinite;
}
.big-fill b{-webkit-text-fill-color:var(--amber);color:var(--amber);font-weight:400;padding:0 .05em}
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Titres de section standard */
h1,h2,h3{color:var(--ink)}
.titre-section{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1;margin-bottom:8px;
}
.sous-titre{font-family:var(--mono);font-size:.9rem;color:var(--orange);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:18px}
.plomb{color:var(--ink-soft);max-width:60ch}

/* ---------------------------------------------------------------------
   CARTES (services, realisations, produits...)
   --------------------------------------------------------------------- */
.grille,.grille-cartes,.cartes{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.carte,.carte-service,.carte-produit,.card{
  background:var(--cream-3);
  border:2px solid var(--ink);
  border-radius:var(--rayon-carte);
  box-shadow:4px 4px 0 var(--ink);
  padding:22px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.carte:hover,.carte-service:hover,.carte-produit:hover,.card:hover{
  transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);
}
.carte h3,.carte-service h3,.card h3{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;
  font-size:1.2rem;margin-bottom:8px;
}
.carte p,.card p{color:var(--ink-soft);font-size:.95rem}
.carte-media img,.carte img{border-radius:var(--rayon);border:2px solid var(--ink)}

/* Icones encadrees (style specs du design) */
.icones{display:flex;gap:0;margin-top:24px;border:2px solid var(--ink);
  width:max-content;max-width:100%;border-radius:var(--rayon);overflow:hidden}
.icones .ic{width:clamp(50px,10vw,64px);height:clamp(50px,10vw,64px);
  display:grid;place-items:center;border-right:2px solid var(--ink);
  transition:background .2s var(--ease)}
.icones .ic:last-child{border-right:none}
.icones .ic:hover{background:var(--amber)}
.icones .ic svg{width:56%;height:56%;stroke:var(--ink);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* Lignes de "code / references" (style Space Mono) */
.code-row{margin-bottom:16px}
.spec-label{display:block;font-family:var(--mono);font-size:.8rem;
  text-transform:uppercase;color:var(--ink);opacity:.8}
.spec-code{display:block;font-family:var(--mono);font-weight:700;color:var(--orange);
  font-size:1.02rem;margin-top:3px}

/* ---------------------------------------------------------------------
   BOUTIQUE / PRODUITS
   --------------------------------------------------------------------- */
.produit-prix,.prix{
  font-family:var(--disp);color:var(--ink);font-size:1.6rem;line-height:1;
}
.produit-prix .devise,.prix small{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft)}
.badge,.etiquette{
  display:inline-block;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.03em;
  background:var(--amber);color:var(--ink);border:2px solid var(--ink);
  border-radius:var(--rayon);padding:2px 9px;
}
.badge.orange{background:var(--orange);color:#fff}
.badge.gris{background:var(--cream-2)}

/* Fiche produit */
.produit-entete{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.produit-galerie img{border:2px solid var(--ink);border-radius:var(--rayon-carte)}

/* Panier / lignes */
.panier-ligne{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:2px solid var(--bord);
}
.panier-total{
  font-family:var(--disp);font-size:1.8rem;
  border-top:3px solid var(--ink);padding-top:14px;margin-top:8px;
}
.qte{display:inline-flex;border:2px solid var(--ink);border-radius:var(--rayon);overflow:hidden}
.qte button{width:34px;height:34px;background:var(--cream-3);border:none;
  font:700 16px var(--sans);cursor:pointer}
.qte button:hover{background:var(--amber)}
.qte input{width:44px;text-align:center;border:none;border-left:2px solid var(--ink);
  border-right:2px solid var(--ink);font:600 15px var(--sans)}

/* ---------------------------------------------------------------------
   TABLEAUX (commandes, factures...)
   --------------------------------------------------------------------- */
table.tbl,.tableau{width:100%;border-collapse:collapse;background:var(--cream-3);
  border:2px solid var(--ink);border-radius:var(--rayon-carte);overflow:hidden}
.tableau th{
  font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;
  text-align:left;background:var(--ink);color:var(--cream);padding:11px 14px;
}
.tableau td{padding:11px 14px;border-top:1px solid var(--bord);font-size:.92rem}
.tableau tr:hover td{background:var(--cream)}

/* ---------------------------------------------------------------------
   FORMULAIRES
   --------------------------------------------------------------------- */
label{display:block;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink);margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],input[type=date],select,textarea{
  width:100%;font:400 15px var(--sans);color:var(--ink);
  background:#fff;border:2px solid var(--ink);border-radius:var(--rayon);
  padding:11px 13px;transition:box-shadow .18s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none;box-shadow:3px 3px 0 var(--amber);
}
textarea{min-height:130px;resize:vertical}
.champ{margin-bottom:16px}
.champ-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aide{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);text-transform:none;
  letter-spacing:0;margin-top:4px}

/* Encadres (formulaire, connexion...) */
.encadre,.panneau,.boite{
  background:var(--cream-3);border:2px solid var(--ink);
  border-radius:var(--rayon-carte);box-shadow:4px 4px 0 var(--ink);padding:26px;
}

/* Messages */
.alerte{border:2px solid var(--ink);border-radius:var(--rayon);padding:12px 16px;
  font-size:.92rem;margin-bottom:16px;border-left-width:6px}
.alerte-ok{background:#EAF3E4;border-left-color:#5f8b3a}
.alerte-info{background:#EAF0F6;border-left-color:#3f6fa5}
.alerte-attention{background:#FBF0DA;border-left-color:var(--amber-2)}
.alerte-erreur{background:#F6E7E2;border-left-color:var(--orange)}

/* ---------------------------------------------------------------------
   FIL D'ARIANE
   --------------------------------------------------------------------- */
.fil{font-family:var(--mono);font-size:12px;color:var(--ink-soft);padding:16px 0}
.fil a{opacity:.75}.fil a:hover{opacity:1}
.fil .sep{margin:0 6px;opacity:.5}

/* ---------------------------------------------------------------------
   PIED DE PAGE
   --------------------------------------------------------------------- */
.site-pied{background:var(--amber);color:var(--ink);border-top:3px solid var(--ink);
  padding:44px 0 30px;position:relative}
.site-pied .haut{
  display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1fr;gap:28px;
}
.site-pied h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;
  font-size:1.05rem;margin-bottom:12px}
.site-pied ul{list-style:none}
.site-pied li{margin-bottom:7px;font-size:14px}
.site-pied a{border-bottom:1px solid rgba(26,24,21,.28);padding-bottom:1px}
.site-pied a:hover{border-bottom-color:var(--ink)}
.site-pied .bas{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:30px;padding-top:18px;border-top:2px solid rgba(26,24,21,.35);
  font-family:var(--mono);font-size:12px;
}
.site-pied i.ti{color:var(--ink)}

/* ---------------------------------------------------------------------
   BANDEAU CONSENTEMENT (Loi 25)
   --------------------------------------------------------------------- */
.consent-bandeau{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  background:var(--cream-3);border:2px solid var(--ink);border-radius:var(--rayon-carte);
  box-shadow:5px 5px 0 var(--ink);padding:18px 20px;
  display:none;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between;
}
.consent-bandeau.actif{display:flex}
.consent-texte{font-size:.9rem;max-width:60ch}
.consent-boutons{display:flex;gap:10px;flex-wrap:wrap}
.consent-voile{position:fixed;inset:0;z-index:210;background:rgba(26,24,21,.5);
  display:none;align-items:center;justify-content:center;padding:20px}
.consent-voile.actif{display:flex}
.consent-panneau{background:var(--cream);border:2px solid var(--ink);
  border-radius:var(--rayon-carte);box-shadow:6px 6px 0 var(--ink);
  padding:26px;max-width:520px;width:100%}
.consent-panneau h3{font-family:var(--disp);text-transform:uppercase;margin-bottom:14px}
.consent-cat{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;
  font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:.9rem}
.consent-cat input{width:auto;margin-top:3px}
.consent-panneau-boutons{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.consent-note{font-size:.78rem;color:var(--ink-soft);margin-top:12px}

/* ---------------------------------------------------------------------
   UTILITAIRES
   --------------------------------------------------------------------- */
.fl{display:flex}
.centre{text-align:center}
.mt{margin-top:22px}.mb{margin-bottom:22px}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-soft)}
.ruban{background:var(--ink);color:var(--cream);font-family:var(--mono);
  font-size:12px;letter-spacing:.04em;text-align:center;padding:8px}

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:960px){
  .site-pied .haut{grid-template-columns:1fr 1fr}
  .produit-entete{grid-template-columns:1fr}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;padding-top:10px}
  .rhino-wrap{max-width:300px;margin:6px auto 0;order:2;justify-self:center;
    -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
  .hero-copy{order:1}

  /* Menu mobile plein ecran */
  .menu-btn{display:flex}
  .entete-icones-mobile{display:flex}
  .site-nav{
    position:fixed;inset:70px 0 0 0;z-index:59;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-top:2px solid var(--ink);
    padding:14px 22px 30px;overflow-y:auto;
    transform:translateX(100%);transition:transform .32s var(--ease);
  }
  .site-nav.ouvert{transform:none}
  .site-nav > a{
    opacity:1;padding:15px 0;font-size:15px;
    border-bottom:1.5px solid var(--bord);
  }
  .site-nav > a.actif{border-bottom-color:var(--amber)}
  .btn-langue{padding:15px 0;border-bottom:1.5px solid var(--bord)}
  .entete-client{text-align:left;border-right:none;padding:12px 0;margin:0;
    border-bottom:1.5px solid var(--bord)}
  .btn-compte,.btn-panier{justify-content:center;margin-top:12px}
  .entete-slogan{display:none}
}
@media (max-width:560px){
  .contenu{padding:0 16px}
  .site-pied .haut{grid-template-columns:1fr}
  .champ-2{grid-template-columns:1fr}
  .site-logo img{height:40px}
  .panier-ligne{grid-template-columns:auto 1fr;gap:10px}
}

/* =====================================================================
   PAGES SPECIFIQUES - habillees " rhino "
   (boutique, fiche produit, compte, commande, soumission,
    realisations/carrousel, lightbox, confidentialite, 404)
   ===================================================================== */

/* ---- Bloc "valeurs" (accueil, si present) ---- */
.valeurs{background:var(--cream-3);padding:48px 0;border-bottom:2px solid var(--ink)}
.valeurs-tete{text-align:center;margin-bottom:30px}
.valeurs-surtitre{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--orange);
  text-transform:uppercase;font-weight:700;margin-bottom:8px}
.valeurs-tete h2{font-family:var(--disp);text-transform:uppercase;font-size:1.9rem;color:var(--ink)}
.valeurs-grille{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.valeur{background:var(--cream);border:2px solid var(--ink);border-radius:var(--rayon-carte);
  box-shadow:3px 3px 0 var(--ink);padding:22px 14px;text-align:center;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.valeur:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.valeur-ico{width:52px;height:52px;min-width:52px;margin:0 auto 12px;border-radius:var(--rayon);
  background:var(--amber-clair);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center}
.valeur-ico svg{width:24px;height:24px;display:block;stroke:var(--ink)!important}
.valeur-titre{font-family:var(--disp);text-transform:uppercase;font-size:.95rem;color:var(--ink);margin-bottom:5px}
.valeur-texte{font-size:12.5px;color:var(--ink-soft);line-height:1.5}

/* ---- Section titre generique (compat ancien) ---- */
.section-titre{margin-bottom:24px}
.section-titre h2{font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ink)}
.section-titre p{font-family:var(--mono);font-size:13px;color:var(--orange);
  text-transform:uppercase;letter-spacing:.03em;margin-top:4px}

/* ---- Cartes produits accueil (compat ancien : .carte / .carte-img / .carte-corps) ---- */
.carte-img{background:var(--cream);border-bottom:2px solid var(--ink);
  height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.carte-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.carte-corps{padding:14px;display:flex;flex-direction:column;flex:1}
.carte-cat{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);margin-bottom:5px}
.carte-nom{font-family:var(--disp);text-transform:uppercase;font-size:1.05rem;color:var(--ink);margin-bottom:6px;line-height:1.05}
.carte-desc{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;flex:1;line-height:1.5}
.carte-bas{display:flex;align-items:center;justify-content:space-between;gap:8px}
.carte-prix{font-family:var(--disp);font-size:1.3rem;color:var(--ink)}
.carte-prix .rec{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}

/* Accueil : cartes produits ~50% plus compactes */
.accueil-produits .grille{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.accueil-produits .carte{box-shadow:3px 3px 0 var(--ink)}
.accueil-produits .carte:hover{box-shadow:5px 5px 0 var(--ink)}
.accueil-produits .carte-img{height:96px}
.accueil-produits .carte-corps{padding:12px}
.accueil-produits .carte-nom{font-size:.92rem}
.accueil-produits .carte-desc{font-size:11.5px;margin-bottom:8px}
.accueil-produits .carte-prix{font-size:1.1rem}
.accueil-produits .btn-sm{padding:5px 11px;font-size:11.5px}

/* ---- CTA final ---- */
.cta{background:var(--cream-3);border-top:2px solid var(--ink);text-align:center;padding:44px 22px}
.cta h2{font-family:var(--disp);text-transform:uppercase;font-size:1.7rem;color:var(--ink);margin-bottom:8px}
.cta p{font-size:14px;color:var(--ink-soft);margin-bottom:18px}

/* =====================================================================
   SOUMISSION / CONTACT
   ===================================================================== */
.soum-wrap{max-width:620px;margin:0 auto}
.soum-titre{text-align:left;font-family:var(--disp);text-transform:uppercase;font-size:1.7rem;color:var(--ink);margin-bottom:16px}
.soum-sous{text-align:left;font-size:13.5px;color:var(--ink-soft);margin:-8px 0 18px}
.soum-sous a{color:var(--orange);font-weight:700;text-decoration:underline}
.soum-err{margin:0 0 16px;background:#F6E7E2;border:2px solid var(--ink);border-left-width:6px;border-left-color:var(--orange);
  padding:10px 14px;border-radius:var(--rayon);font-size:13.5px}
.soum-grille{display:block}
.soum-adresse{background:var(--cream-3);border:2px solid var(--ink);border-radius:var(--rayon);padding:14px 16px;
  margin-bottom:16px;box-shadow:3px 3px 0 var(--ink)}
.soum-adresse-titre{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--orange);width:100%;margin-bottom:6px}
.soum-adresse p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0}
.soum-adresse .soum-cie{font-weight:700;color:var(--ink)}
.soum-adresse .soum-tel{color:var(--orange);font-weight:600;margin-top:2px}
.soum-form{background:var(--cream-3);border:2px solid var(--ink);border-radius:var(--rayon-carte);padding:20px;box-shadow:4px 4px 0 var(--ink)}
.soum-produit{background:var(--cream);border:2px solid var(--ink);border-radius:var(--rayon);padding:9px 12px;margin-bottom:14px;font-size:12.5px;color:var(--ink-soft)}
.soum-produit strong{color:var(--ink)}
.soum-produit a{color:var(--orange);font-weight:600;text-decoration:underline}
.soum-form .champ{margin-bottom:12px}
.soum-form label{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.soum-form .req{color:var(--orange)}
.soum-form input,.soum-form textarea{width:100%;padding:10px 12px;border:2px solid var(--ink);border-radius:var(--rayon);
  font:400 14px var(--sans);color:var(--ink);background:#fff}
.soum-form input:focus,.soum-form textarea:focus{outline:none;box-shadow:3px 3px 0 var(--amber)}
.soum-form input.champ-fixe{background:var(--cream);font-weight:600;cursor:default}
.soum-form input.champ-fixe:focus{box-shadow:none}
.soum-form textarea{resize:vertical;min-height:90px}
.soum-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.soum-consent{display:flex;align-items:center;gap:9px;background:var(--cream);border:2px solid var(--ink);border-radius:var(--rayon);
  padding:10px 12px;margin:4px 0 14px;font-size:12.5px;color:var(--ink-soft)}
.soum-consent input{width:auto;flex:0 0 auto}
.soum-submit{display:block;width:100%;background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:12px;border:2px solid var(--ink);border-radius:var(--rayon);
  font-size:13px;cursor:pointer;box-shadow:3px 3px 0 var(--amber);transition:transform .12s,box-shadow .12s}
.soum-submit:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--amber)}
.soum-merci{max-width:520px;margin:0 auto;text-align:center;padding:24px 0}
.soum-merci-ico{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;background:var(--amber);color:var(--ink);
  border:2px solid var(--ink);font-size:30px;line-height:56px;font-weight:700}
.soum-merci h2{font-family:var(--disp);text-transform:uppercase;font-size:1.4rem;color:var(--ink);margin-bottom:10px}
.soum-merci p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-bottom:18px}
.soum-merci-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* =====================================================================
/* =====================================================================
   CONFIDENTIALITE + CONFIRMATION COMPTE + 404
   ===================================================================== */
.conf-wrap{max-width:760px;margin:0 auto}
.conf-wrap h1{font-family:var(--disp);text-transform:uppercase;font-size:1.9rem;color:var(--ink);margin-bottom:6px}
.conf-maj{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-bottom:24px}
.conf-wrap h2{font-family:var(--disp);text-transform:uppercase;font-size:1.2rem;color:var(--ink);margin:22px 0 8px}
.conf-wrap p{font-size:14.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:10px}
.conf-wrap a{color:var(--orange);text-decoration:underline}

.confirm-page{padding:60px 20px 80px}
.confirm-wrap{max-width:520px;margin:0 auto;text-align:center}
.confirm-wrap h1{font-family:var(--disp);text-transform:uppercase;font-size:1.7rem;color:var(--ink);margin:8px 0 12px}
.confirm-wrap p{color:var(--ink-soft);line-height:1.7;margin-bottom:24px}
.confirm-ico{width:72px;height:72px;border-radius:50%;margin:0 auto 18px;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;color:#fff}
.confirm-ok{background:#5f8b3a}.confirm-err{background:var(--orange)}
.confirm-wrap .btn{margin:0 4px}

.err404{padding:60px 22px 80px}
.err404-wrap{max-width:620px;margin:0 auto;text-align:center}
.err404-code{font-family:var(--disp);font-size:5rem;color:var(--orange);line-height:1;margin-bottom:8px}
.err404-titre{font-family:var(--disp);text-transform:uppercase;font-size:1.9rem;color:var(--ink);margin:0 0 14px}
.err404-texte{color:var(--ink-soft);line-height:1.6;margin-bottom:28px;font-size:16px}
.err404-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.err404-liens{font-family:var(--mono);font-size:13px;color:var(--ink-soft);padding-top:20px;border-top:2px solid var(--bord)}
.err404-liens a{color:var(--orange);margin:0 8px}

/* =====================================================================
/* ---------------------------------------------------------------------
   MOUVEMENT REDUIT
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .h-line span{transform:none!important}
  .rhino-bob{animation:none}
}

/* Mention " (optionnel) " dans les libelles de formulaire */
.soum-opt{color:var(--doux);font-weight:400;font-size:.8em;text-transform:none;letter-spacing:0}


/* =====================================================================
   AJOUTS BRANCHER
   ===================================================================== */

/* Bouton "Espace client" de l'en-tete (meme gabarit que btn-panier) */
.btn-espace{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-weight:600;font-size:12px;
  padding:7px 13px;border-radius:var(--rayon);
  border:2px solid var(--ink);color:var(--ink);background:var(--amber);
  box-shadow:2px 2px 0 var(--ink);white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn-espace:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn-espace:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn-espace svg{width:15px;height:15px}
/* Langue active (le reste du menu vient de la charte) */
.btn-langue a.actif{opacity:1;font-weight:700}

/* En-tete de page interieure */
.page-tete{padding:46px 0 10px;background:var(--cream)}
.page-tete h1{font-family:var(--disp);text-transform:uppercase;line-height:.98;
  font-size:clamp(2.2rem,5.4vw,4.2rem);letter-spacing:.005em}
.page-tete .brush{font-size:clamp(1.4rem,3.4vw,2.3rem);margin:10px 0 0 4px}
.page-tete .sub{margin-top:18px;max-width:62ch;font-size:1.05rem;color:var(--ink-soft)}

/* Tableau comparatif avant / apres */
.compare-wrap{overflow-x:auto}
.compare td:first-child{font-weight:600;white-space:nowrap}
.compare .avant{color:var(--ink-soft)}
.compare .apres{color:var(--ink);font-weight:500}
.puce{display:inline-block;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--ink);margin-right:9px;vertical-align:-1px}
.puce-non{background:var(--orange)}
.puce-oui{background:#7fae4e}

/* Etapes numerotees */
.etapes-grille{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.etape-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--amber);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  font-family:var(--disp);font-size:1.3rem;margin-bottom:14px;
}

/* Liste a puces ambre */
.liste-rhino{list-style:none;margin-top:6px}
.liste-rhino li{position:relative;padding-left:24px;margin-bottom:9px;
  color:var(--ink-soft);font-size:.95rem}
.liste-rhino li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;
  background:var(--amber);border:2px solid var(--ink);border-radius:2px}

/* Fiche d'identite legale */
.identite-legale dl{display:grid;grid-template-columns:auto 1fr;gap:12px 26px}
.identite-legale dt{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.03em;color:var(--orange);padding-top:3px}
.identite-legale dd{color:var(--ink);font-size:.98rem}
.identite-legale a{color:var(--orange);text-decoration:underline}

/* Avis / encadre d'information */
.avis{background:var(--cream-3);border:2px solid var(--ink);border-left-width:6px;
  border-left-color:var(--amber);border-radius:var(--rayon);padding:18px 22px;
  box-shadow:3px 3px 0 var(--ink)}
.avis p{color:var(--ink-soft);margin-bottom:10px;font-size:.95rem}
.avis p:last-child{margin-bottom:0}
.avis strong{color:var(--ink)}

/* Question anti-robot du formulaire */
.champ-antirobot input{max-width:180px}
.soum-erreur-champ{border-color:var(--orange)!important;box-shadow:3px 3px 0 var(--orange)!important}

/* Liens de contenu */
.lien-accent{color:var(--orange);font-weight:600;text-decoration:underline}

@media (max-width:860px){
  .site-nav .btn-espace{justify-content:center;margin-top:12px}
  .identite-legale dl{grid-template-columns:1fr;gap:3px 0}
  .identite-legale dd{margin-bottom:12px}
}

/* ---------------------------------------------------------------------
   PAGE SUPPORT (support.php) - prefixe sp-
   --------------------------------------------------------------------- */
.sp-tete{align-items:center;gap:48px}
.sp-tete h1{max-width:13ch}
.sp-actions{margin-top:26px}
.sp-figure{margin:0}
.sp-figure figcaption{margin-top:18px;font-size:.9rem;color:var(--ink-soft);max-width:44ch}
.sp-leg{display:block}
.sp-leg + .sp-leg{margin-top:10px}
.sp-leg strong{color:var(--ink)}

/* Reproduction de la fenetre RustDesk : ou lire l'ID et le code */
.sp-fenetre{background:#fff;border:2px solid var(--ink);border-radius:var(--rayon-carte);
  box-shadow:8px 8px 0 var(--ink);max-width:460px;overflow:visible;font-family:'Segoe UI',system-ui,sans-serif}
.sp-barre{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--bord);
  font-size:12.5px;color:var(--ink-soft)}
.sp-barre img{height:26px;width:auto;display:block}
.sp-barre span{font-weight:600;color:var(--ink)}
.sp-corps{display:grid;grid-template-columns:1fr 1fr}
.sp-gauche{background:#ECEBEA;padding:16px 14px 18px}
.sp-gauche strong{font-size:1rem}
.sp-gauche small{display:block;font-size:11.5px;color:#666;margin:4px 0 14px;line-height:1.35}
.sp-champ{border-left:3px solid #2B7FD9;padding-left:9px;margin-bottom:13px;position:relative}
.sp-champ span{display:block;font-size:11.5px;color:#666}
.sp-champ b{font-size:1.3rem;font-weight:400;letter-spacing:.03em}
.sp-mdp b{font-size:1rem}
.sp-repere{position:absolute;right:-8px;top:50%;transform:translate(100%,-50%);
  font:400 1rem/1.1 var(--brush);color:var(--orange);white-space:nowrap;
  display:flex;align-items:center;gap:6px;font-style:normal}
.sp-repere::before{content:"";width:30px;border-top:2px solid var(--orange)}
.sp-droite{padding:16px 14px;display:flex;flex-direction:column;gap:10px;color:#999;font-size:12.5px}
.sp-faux-champ{border:1px solid #ccc;border-radius:4px;height:34px}
.sp-faux-btn{align-self:flex-end;background:#2B7FD9;border-radius:4px;width:92px;height:26px}
.sp-pied{border-top:1px solid var(--bord);padding:7px 12px;font-size:12.5px;display:flex;align-items:center;gap:7px}
.sp-pied::before{content:"";width:8px;height:8px;border-radius:50%;background:#2DB37A}

/* Bande anti-fraude */
.sp-fraude{background:var(--ink);color:var(--cream);padding:42px 0;margin-top:40px}
.sp-fraude .contenu{display:grid;grid-template-columns:minmax(220px,.8fr) 2fr;gap:36px;align-items:start}
.sp-fraude h2{font-family:var(--disp);text-transform:uppercase;color:var(--amber);
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1}
.sp-fraude ul{list-style:none;display:grid;gap:14px}
.sp-fraude li{position:relative;padding-left:26px;max-width:68ch;color:#DCD5C7}
.sp-fraude li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--orange)}
.sp-fraude strong{color:#fff}
.sp-fraude a{text-decoration:underline}

/* Encadre du telechargement */
.sp-dl{margin-top:30px}

/* Liste "ce qu on ne fait pas" : carres orange */
.liste-rhino.sp-non li::before{background:var(--orange)}

/* FAQ */
.sp-faq{max-width:820px;margin-top:10px}
.sp-faq details{border-bottom:2px solid var(--ink)}
.sp-faq details:first-child{border-top:2px solid var(--ink)}
.sp-faq summary{cursor:pointer;list-style:none;padding:18px 44px 18px 0;font-weight:600;font-size:1.02rem;position:relative}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font:400 1.8rem/1 var(--disp)}
.sp-faq details[open] summary::after{content:"\2013"}
.sp-faq details p{color:var(--ink-soft);padding-bottom:18px;max-width:70ch}

@media (max-width:1100px){ .sp-repere{display:none} }
@media (max-width:860px){
  .sp-fraude .contenu{grid-template-columns:1fr;gap:18px}
  .sp-tete h1{max-width:none}
}
@media (max-width:560px){
  .sp-corps{grid-template-columns:1fr}
  .sp-droite{display:none}
  .sp-fenetre{box-shadow:5px 5px 0 var(--ink)}
}

/* ---------------------------------------------------------------------
   PAGE CONNEXION PRIVEE (connexion-privee.php) - prefixe cp-
   --------------------------------------------------------------------- */
.cp-heros{background:var(--ink);color:var(--cream);padding:18px 0 70px}
.cp-heros .fil{color:#b9b2a3}
.cp-heros-grille{display:grid;grid-template-columns:1.25fr .85fr;gap:56px;align-items:center;margin-top:26px}
.cp-heros h1{font-family:var(--disp);text-transform:uppercase;color:#fff;line-height:.98;
  font-size:clamp(2.2rem,5vw,3.9rem);letter-spacing:.005em;max-width:17ch}
.cp-heros .brush{color:var(--amber);font-size:clamp(1.6rem,3.6vw,2.6rem);margin:12px 0 0 4px}
.cp-sub{margin-top:26px;color:#DCD5C7;max-width:58ch;font-size:1.02rem}
.cp-tirets{list-style:none;margin-top:22px;display:grid;gap:11px}
.cp-tirets li{position:relative;padding-left:26px;color:#F1ECE2}
.cp-tirets li::before{content:"";position:absolute;left:0;top:.66em;width:13px;height:3px;background:var(--amber)}
.cp-carte{border:2px solid var(--amber);background:#26221D;padding:30px;border-radius:var(--rayon)}
.cp-carte h2{font-family:var(--sans);font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:10px}
.cp-carte p{color:#CFC7B8;font-size:.95rem;margin-bottom:22px}

.cp-modes{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cp-ideal{margin-top:12px;padding-top:12px;border-top:2px dashed var(--bord-fort);font-weight:600;color:var(--ink)!important}

/* Formulaire */
.cp-form-wrap{max-width:860px}
.cp-form [hidden]{display:none!important}
.cp-form fieldset{border:0;border-top:2px solid var(--ink);padding:16px 0 6px;margin:0 0 8px}
.cp-form fieldset:first-of-type{border-top:0;padding-top:0}
.cp-form legend{font-family:var(--disp);text-transform:uppercase;font-size:1.25rem;padding:0 0 10px;letter-spacing:.01em}
.cp-aide{font-size:.9rem;color:var(--ink-soft);margin:-2px 0 14px;max-width:70ch}
.cp-poste{display:grid;grid-template-columns:34px 1.3fr 1fr 1.25fr auto;gap:10px;align-items:end;
  padding:12px;margin-bottom:10px;background:var(--cream);border:2px solid var(--ink);border-radius:var(--rayon)}
.cp-poste .champ{margin:0}
.cp-num{align-self:center;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--amber);border:2px solid var(--ink);font-family:var(--disp);font-size:1rem}
.cp-form select{width:100%;padding:10px 8px;border:2px solid var(--ink);border-radius:var(--rayon);
  background:#fff;font:14px var(--sans);color:var(--ink)}
.cp-form select:focus{outline:none;box-shadow:3px 3px 0 var(--amber)}
.cp-retirer{background:none;border:2px solid var(--ink);border-radius:var(--rayon);padding:9px 12px;
  font:600 13px var(--sans);cursor:pointer;color:var(--ink)}
.cp-retirer:hover{background:#F6E7E2}
.cp-note{grid-column:2 / -1;font-size:.86rem;color:var(--orange);font-weight:600;margin:2px 0 0}
.cp-ajouter{margin:4px 0 12px}
.cp-en-erreur .cp-poste{border-color:var(--orange);box-shadow:3px 3px 0 var(--orange)}
.cp-choix{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.cp-case{display:inline-flex!important;align-items:center;gap:8px;background:var(--cream);border:2px solid var(--ink);
  border-radius:var(--rayon);padding:9px 14px;cursor:pointer;font:500 14px var(--sans)!important;
  text-transform:none!important;letter-spacing:0!important;margin:0!important}
.cp-form .cp-case input{width:auto;margin:0;accent-color:var(--ink)}
.cp-nb{display:inline-flex;align-items:center;gap:8px}
.cp-nb label{margin:0!important}
.cp-form .cp-nb input{width:84px}

@media (max-width:960px){
  .cp-heros-grille{grid-template-columns:1fr;gap:34px}
  .cp-poste{grid-template-columns:34px 1fr 1fr}
  .cp-poste .champ:nth-of-type(1){grid-column:2 / -1}
  .cp-retirer{grid-column:2 / -1;justify-self:start}
}
@media (max-width:640px){
  .cp-modes{grid-template-columns:1fr}
  .cp-poste{grid-template-columns:1fr}
  .cp-poste .champ:nth-of-type(1),.cp-retirer,.cp-note{grid-column:auto}
  .cp-num{display:none}
}

/* ---------------------------------------------------------------------
   MENU : groupe deroulant "Services" (inc/entete.php)
   --------------------------------------------------------------------- */
.nav-groupe{position:relative}
.nav-deroul{display:inline-flex;align-items:center;gap:4px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);opacity:.72;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav-deroul svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.nav-deroul:hover,.nav-groupe.ouvert .nav-deroul{opacity:1}
.nav-groupe.actif .nav-deroul{opacity:1;border-bottom-color:var(--amber)}
.nav-groupe.ouvert .nav-deroul svg{transform:rotate(180deg)}
.nav-panneau{display:none;position:absolute;top:calc(100% + 14px);left:-18px;z-index:70;width:330px;
  background:var(--cream-3);border:2px solid var(--ink);border-radius:var(--rayon-carte);
  box-shadow:5px 5px 0 var(--ink);padding:8px}
.nav-panneau::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* pont de survol */
.nav-groupe.ouvert .nav-panneau{display:block}
@media (hover:hover) and (min-width:861px){
  .nav-groupe:hover .nav-panneau{display:block}
  .nav-groupe:hover .nav-deroul svg{transform:rotate(180deg)}
}
.nav-choix{display:block;padding:10px 12px;border-radius:var(--rayon);color:var(--ink)}
.nav-choix strong{display:block;font-family:var(--disp);text-transform:uppercase;font-weight:400;
  font-size:1.05rem;letter-spacing:.01em}
.nav-choix span{display:block;font-size:13px;color:var(--ink-soft);line-height:1.4;margin-top:2px}
.nav-choix:hover,.nav-choix:focus-visible,.nav-sous:hover,.nav-sous:focus-visible{background:var(--cream-2)}
.nav-choix.actif{background:var(--amber-clair)}
.nav-sous{display:block;margin:-2px 0 6px 12px;padding:6px 12px 6px 14px;border-left:3px solid var(--amber);
  font-size:13px;font-weight:600;color:var(--ink);border-radius:0 var(--rayon) var(--rayon) 0}
.nav-sous.actif{background:var(--amber-clair)}

@media (max-width:860px){
  .nav-groupe{border-bottom:1.5px solid var(--bord);padding-bottom:8px}
  .nav-deroul{opacity:1;padding:15px 0 6px;font-size:15px;pointer-events:none}
  .nav-deroul svg{display:none}
  .nav-panneau,.nav-groupe.ouvert .nav-panneau{display:block;position:static;width:auto;border:0;
    box-shadow:none;background:none;padding:0 0 0 4px}
  .nav-panneau::before{display:none}
  .nav-choix{padding:9px 10px}
  .nav-choix strong{font-size:1.1rem}
}

/* ---------------------------------------------------------------------
   ACCUEIL : "Qu'est-ce qu'il vous faut ?" (orientation vers les services)
   --------------------------------------------------------------------- */
.choix-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.choix-grille .carte{display:flex;flex-direction:column}
.choix-grille .carte p{flex:1;margin-bottom:18px}
.choix-grille .btn{align-self:flex-start}
@media (max-width:960px){ .choix-grille{grid-template-columns:1fr} }

/* Largeurs intermediaires : le slogan de l'en-tete cede sa place au
   menu (6 elements). Sans ceci, le menu debordait de 861 a 1163px. */
@media (min-width:861px) and (max-width:1240px){
  .entete-slogan{display:none}
  .site-nav{gap:14px;margin-left:16px}
}
@media (min-width:861px) and (max-width:980px){
  .site-nav{gap:10px;margin-left:10px}
  .site-nav > a,.nav-deroul{font-size:10.5px;letter-spacing:0}
  .btn-espace span{display:none}
  .btn-espace{padding:7px 9px}
}

/* Tres petits ecrans (320-350px) : un mot long en capitales (ex.
   FONCTIONNEMENT) pouvait depasser, surtout si la police Anton ne se
   charge pas. Coupure permise plutot que defilement horizontal. */
.page-tete h1,.cp-heros h1,.titre-section{overflow-wrap:break-word}
/* Coupure avec trait d'union seulement sur tres petit ecran : sur ordinateur,
   elle coupait "DIS-TANCE" et "INVI-TATION" dans les titres. */
@media (max-width:420px){ .page-tete h1,.cp-heros h1,.titre-section{hyphens:auto} }
.cp-heros-grille > *,.produit-entete > *{min-width:0}

/* Ancres (#options, #commande, #etapes) : le titre ne passe plus sous
   l'en-tete collant. */
section[id]{scroll-margin-top:84px}

/* ---------------------------------------------------------------------
   PAGE SUPPORT CLIENT (support-client.php) - prefixes sc- et mq-
   mq- = maquettes d'ecrans (remplacables par de vraies captures)
   --------------------------------------------------------------------- */
.sc-tete{align-items:center;gap:48px}
.sc-tete h1{max-width:15ch}
.sc-dl{background:var(--ink);color:var(--cream);border:2px solid var(--ink);border-radius:var(--rayon-carte);
  box-shadow:8px 8px 0 var(--amber);padding:28px 28px 24px}
.sc-dl-titre{font-family:var(--mono);font-size:12px;color:var(--amber);margin-bottom:6px}
.sc-dl-nom{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.8rem);
  color:#fff;line-height:1.05;margin-bottom:18px;overflow-wrap:anywhere}
.sc-dl-btn{font-size:1.02rem;padding:14px 22px}
.sc-dl-note{font-size:.85rem;color:#CFC7B8;margin-top:14px}
.sc-dl-note a{color:#fff;text-decoration:underline}

.sc-etapes .contenu{display:grid;gap:64px}
.sc-etape{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.sc-inverse .sc-texte{order:2}
.sc-texte h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;margin:14px 0 14px}
.sc-texte p{max-width:52ch;margin-bottom:10px}
.sc-astuce{font-size:.9rem;color:var(--ink-soft);border-left:3px solid var(--amber);padding-left:12px}
.sc-capture{width:100%;border:2px solid var(--ink);border-radius:var(--rayon-carte);box-shadow:8px 8px 0 var(--ink)}
.sc-maquette{display:flex;justify-content:center}
.sc-fenetre{width:100%}
.sc-note{font-size:.85rem;color:var(--ink-soft);max-width:80ch}

/* commun aux maquettes */
.mq-nav,.mq-smart,.mq-cm,.mq-uac{width:100%;max-width:440px;border:2px solid var(--ink);border-radius:var(--rayon-carte);
  box-shadow:8px 8px 0 var(--ink);background:#fff;font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;color:#1f1f1f;position:relative}
.mq-bouton{position:relative;display:inline-block;border:1px solid #9a9a9a;border-radius:4px;padding:6px 16px;background:#f3f3f3;font-size:12.5px}
.mq-actif{border-color:#1f1f1f;font-weight:600}
.mq-vert{background:#2DB37A;border-color:#1f8a5b;color:#fff;font-weight:600}
.mq-bleu{background:#0067C0;border-color:#00549e;color:#fff;font-weight:600}
.mq-rouge{background:#D9483B;border-color:#b3372b;color:#fff;font-weight:600}
.mq-fleche{position:absolute;font:400 .95rem/1.1 var(--brush);color:var(--orange);white-space:nowrap;font-style:normal;
  display:flex;align-items:center;gap:6px;top:50%;transform:translateY(-50%);left:calc(100% + 10px)}
.mq-fleche::before{content:"";width:26px;border-top:2px solid var(--orange)}
.mq-g{left:auto;right:calc(100% + 10px);flex-direction:row-reverse}

/* 1. navigateur */
.mq-nav-barre{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid #ddd;background:#f1f1f1;border-radius:8px 8px 0 0}
.mq-nav-barre span{width:9px;height:9px;border-radius:50%;background:#c9c9c9}
.mq-nav-barre em{margin-left:8px;font-style:normal;background:#fff;border-radius:12px;padding:3px 12px;color:#555;font-size:12px}
.mq-telech{margin:14px 14px 18px auto;width:78%;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.12);padding:12px}
.mq-telech-titre{font-weight:600;margin-bottom:10px}
.mq-fichier{display:flex;gap:10px;align-items:center}
.mq-fichier b{display:block;font-size:12px;word-break:break-all}
.mq-fichier small{color:#666}
.mq-ico-exe{flex:none;width:28px;height:34px;border-radius:3px;background:linear-gradient(#2B7FD9,#1f5fa8)}
.mq-lien{position:relative;display:inline-block;margin-top:10px;color:#0b57d0;text-decoration:underline;font-size:12.5px}

/* 2. SmartScreen */
.mq-smart{background:#0f6cbd;color:#fff}
.mq-smart-haut{padding:22px 22px 18px;position:relative}
.mq-smart-haut b{display:block;font-size:17px;font-weight:600;margin-bottom:10px}
.mq-smart-haut p{font-size:12.5px;margin-bottom:12px;color:#e6f0fa}
.mq-smart-haut u{position:relative;display:inline-block;font-size:12.5px}
.mq-smart-haut .mq-fleche{color:#FFD27A;text-decoration:none}
.mq-smart-haut .mq-fleche::before{border-color:#FFD27A}
.mq-smart-bas{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;background:#0b5aa0;border-radius:0 0 8px 8px}
.mq-smart-bas .mq-bouton{background:#fff;color:#1f1f1f}
.mq-smart-bas .mq-g{color:#FFD27A}
.mq-smart-bas .mq-g::before{border-color:#FFD27A}

/* 4 et 6. fenetre de connexion */
.mq-cm-haut{display:flex;gap:12px;align-items:center;padding:16px}
.mq-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--amber);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font:400 1.2rem var(--disp);font-style:normal}
.mq-cm-haut b{display:block;font-size:14px}
.mq-cm-haut small{color:#666}
.mq-cm-droits{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 14px}
.mq-cm-droits span{background:#eef4fb;border:1px solid #cfe0f3;border-radius:12px;padding:3px 10px;font-size:11.5px;color:#1f4f86}
.mq-cm-bas{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #e3e3e3}

/* 5. controle de compte */
.mq-uac-haut{background:#1f1f1f;color:#fff;padding:10px 16px;font-size:12.5px;border-radius:8px 8px 0 0}
.mq-uac-corps{padding:18px 16px}
.mq-uac-corps b{display:block;font-size:15px;font-weight:600;margin-bottom:10px}
.mq-uac-corps p{color:#555;font-size:12px}
.mq-uac-bas{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;background:#f3f3f3;border-radius:0 0 8px 8px}

@media (max-width:1100px){ .mq-fleche{display:none} }
@media (max-width:860px){
  .sc-etape{grid-template-columns:1fr;gap:26px}
  .sc-inverse .sc-texte{order:0}
  .sc-tete h1{max-width:none}
}

/* Code de telechargement (support-client.php) */
.sc-code-lbl{display:block;font-size:.9rem;color:#E9E3D6;margin-bottom:8px}
.sc-code-ligne{display:flex;gap:10px;flex-wrap:wrap}
.sc-code-ligne input{flex:1 1 150px;min-width:0;font:600 1.5rem/1 var(--mono);letter-spacing:.25em;text-align:center;
  padding:10px 12px;border:2px solid var(--amber);border-radius:var(--rayon);background:#fff;color:var(--ink)}
.sc-code-ligne input:focus{outline:3px solid var(--amber);outline-offset:2px}
.sc-code-err{margin-top:10px;background:#F6E1D8;color:var(--ink);border-left:4px solid var(--orange);padding:8px 12px;font-size:.9rem}
.sc-demande{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.sc-demande-btn{display:block;border:2px solid #fff;border-radius:var(--rayon);padding:9px 12px;color:#fff;font-weight:600;
  font-size:.92rem;text-decoration:none}
.sc-demande-btn span{display:block;font:400 .78rem var(--mono);color:#CFC7B8;margin-top:2px;overflow-wrap:anywhere}
.sc-demande-btn:hover{background:#26221D}
@media (max-width:420px){ .sc-demande{grid-template-columns:1fr} }

/* Carte "Allez a la page de telechargement" (support.php) : petite, a gauche de la
   fenetre illustree et centree sur elle (meme rangee de grille que la fenetre). */
.sp-figure{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:20px;align-items:center}
.sp-figure .sp-fenetre{grid-column:2;grid-row:1}
.sp-figure figcaption{grid-column:2;grid-row:2}
.sp-telecharger{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  background:var(--amber);color:var(--ink);border:2px solid var(--ink);border-radius:var(--rayon);
  box-shadow:4px 4px 0 var(--ink);padding:12px 8px;font:700 .78rem/1.2 var(--sans);text-decoration:none;hyphens:none;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.sp-telecharger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sp-telecharger:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.sp-telecharger:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .sp-telecharger{transition:none} .sp-telecharger:hover{transform:none} }
@media (max-width:1100px){
  .sp-figure{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .sp-telecharger{grid-column:1;grid-row:1;justify-self:start;flex-direction:row;padding:9px 14px;font-size:.85rem}
  .sp-telecharger svg{width:18px;height:18px}
  .sp-figure .sp-fenetre{grid-column:1;grid-row:2}
  .sp-figure figcaption{grid-column:1;grid-row:3}
}