/* ===========================
   RESET
=========================== */

/* ==================================================
   CHARGEMENT DES FEUILLES DE STYLE

   Les feuilles de sections sont chargées par
   WordPress via wp_enqueue_style() dans
   functions.php (dépendance : main-style).

   Les @import qui se trouvaient ici faisaient
   double emploi avec ces enqueue : chaque règle
   était chargée deux fois et l'ordre de cascade
   devenait imprévisible. Ne pas les rétablir :
   ajouter la feuille dans functions.php.
================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #2563eb;
    --primary-light: #3b82f6;

    --dark: #07172f;
    --dark-light: #0b2347;

    --white: #ffffff;
    --text: #dbe4f3;

    --radius: 18px;
    --transition: 0.3s ease;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.30);

    /* Marge latérale de référence pour le travail
       page par page. Volontairement inutilisée pour
       l'instant : aucune valeur existante n'est
       modifiee. A adopter progressivement pour
       homogeneiser les gouttieres mobiles. */
    --le-gutter: clamp(16px, 4vw, 40px);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    /* Aucun overflow-x:hidden ici.

       Le masquage global a ete retire apres correction des
       causes reelles (voir accueil_new/hero_new.css). Si un
       debordement horizontal reapparait, c'est le signe d'un
       vrai defaut de layout a corriger a sa source, pas d'un
       masque a remettre. */

    /* Empeche un mot, une URL ou un email trop long de
       sortir de son conteneur. Sans effet tant que le
       texte tient sur la ligne. */
    overflow-wrap: break-word;

    background: var(--dark);
    color: var(--text);
}

/* ==================================================
   SOCLE RESPONSIVE GLOBAL

   Garde-fous universels uniquement. Aucune regle de
   layout, aucune media query : les breakpoints sont
   choisis page par page, au moment ou un layout
   cesse reellement de fonctionner.

   Tous les selecteurs ci-dessous sont des selecteurs
   d'element (specificite 0,0,1). Les regles du theme
   sont toutes prefixees par une classe (specificite
   >= 0,1,1) et restent donc prioritaires.

   Ces garde-fous ne se declenchent que lorsqu'un
   element depasse deja son conteneur : le rendu
   desktop actuel est preserve.

   Zones de reference (indicatives, pas des
   breakpoints imposes) :
     desktop large  >= 1440
     laptop         1100 - 1439
     tablette       700 - 1099
     mobile         < 700
================================================== */

/* --- MEDIAS --------------------------------------
   height:auto neutralise les attributs width/height
   que WordPress ajoute automatiquement aux images :
   sans lui, une image dont la largeur est contrainte
   serait ecrasee verticalement.
   Les 112 regles ".classe img{...}" du theme sont
   plus specifiques et continuent de s'appliquer. */

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

/* Les SVG inline du theme sont dimensionnes
   exclusivement en CSS (aucun attribut width/height
   dans les templates) : on pose seulement un
   plafond, sans toucher a leur dimensionnement. */

svg {
    max-width: 100%;
}

iframe,
embed,
object {
    max-width: 100%;
}

/* --- FORMULAIRES ---------------------------------
   Les champs ne heritent pas de la largeur de leur
   conteneur par defaut : un input, un select a
   options longues ou un textarea redimensionne a la
   souris sont des causes classiques de debordement.
   Aucune propriete visuelle (police, couleur,
   bordure, padding) n'est touchee ici. */

input,
select,
textarea,
button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

/* iOS Safari zoome automatiquement sur tout champ dont la
   police fait moins de 16px. Le seuil est releve uniquement
   sous 768px : les tailles desktop, plus fines, sont
   conservees telles quelles.
   Cases a cocher, radios et curseurs sont exclus : la
   propriete n'a aucun effet visuel utile sur eux. */

@media (max-width: 768px) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select:not([multiple]):not([size]),
    textarea:not([hidden]):not([disabled]) {
        font-size: 16px;
    }

}

/* --- TABLEAUX ET BLOCS LARGES --------------------
   Aucun tableau n'est present dans les templates du
   theme, mais l'editeur WordPress et WooCommerce
   peuvent en produire.
   Strategie : plafonner le tableau, et fournir un
   conteneur de defilement local a appliquer au cas
   par cas (jamais de scroll horizontal de page). */

table {
    max-width: 100%;
}

pre {
    max-width: 100%;
    overflow-x: auto;
}

.le-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* ===========================
   CONTAINER
=========================== */

.le-container {
    width: min(1280px, 92%);
    margin: auto;
}


.le-container_new {
    width: min(1280px, 92%);
    margin: auto;
}

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22,.61,.36,1);
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

.reveal:nth-child(1){ transition-delay:.1s; }
.reveal:nth-child(2){ transition-delay:.2s; }
.reveal:nth-child(3){ transition-delay:.3s; }
.reveal:nth-child(4){ transition-delay:.4s; }
.reveal:nth-child(5){ transition-delay:.5s; }
.reveal:nth-child(6){ transition-delay:.6s; }


/* ==================================================
   DÉSACTIVER APPUI LONG VERSION MOBILE
================================================== */

img,
svg,
video {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ==================================================
   FIN DÉSACTIVER APPUI LONG VERSION MOBILE
================================================== */