/*
Theme Name: Madilife Child
Author: studio999
Description: Theme enfant Madilife
Version: 1.0.0
Template: twentytwentyfive
Text Domain: madilife
*/

.rouge {
	text-decoration: none;
}

.rouge a:hover {
	text-decoration: none;
	background-image: url(assets/images/underline_rouge.svg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 6rem;
}

footer a:hover {
	text-decoration: none;
	background-image: url(assets/images/underline_rouge.svg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 4rem;
}

header a:hover {
	text-decoration: none;
	background-image: url(assets/images/underline_rouge.svg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 4rem;
}

.faq{
  background-image: url(assets/images/toit_bleu.svg);
  background-size: 80rem;
  background-position: center center;
  background-repeat: no-repeat;
}

.souligne {
	background-image: url(assets/images/underline_rouge.svg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 10rem;
}

@media (max-width: 780px) {
	.souligne {
		background-position: bottom center;
		background-size: 5rem;
	}
}

.presentation {
	background-image: url(assets/images/coeur-gris.svg);
	background-repeat: no-repeat;
	background-size: 60rem;
	background-position: center center;
}

.zoom {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.zoom:hover {
	transform: scale(1.05);
}

footer {
	margin: 0;
}

footer a {
	text-decoration: none;
	text-align: center !important;
	align-items: center !important;
}

.apparition {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.50s ease, transform 0.50s ease;
	will-change: opacity, transform;
}

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

.sandra {
	background-image: url(assets/images/logo\ gris.svg);
	background-repeat: no-repeat;
	background-size: 200rem;
	background-position: center center;
}

.pastille:hover {
	background-color: #255150 !important;
	color: #ffffff !important;
}

.avis {
	background-image: url(assets/images/coeur-gris.svg);
	background-size: 120rem;
}

/* Mobile */
@media (max-width: 767px) {
	.reverse-mobile {
		flex-direction: column-reverse;
	}
}


/* -----------------------------------------------------------
	FORMULAIRE DE CONTACT
----------------------------------------------------------- */


#ml-form, #ml-form * { box-sizing: border-box; }
#ml-form p { margin: 0 !important; }
#ml-form br { display: none; }

#ml-form .cf7-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:16px;
}
#ml-form .cf7-col-12{ grid-column:span 12; }
#ml-form .cf7-col-8 { grid-column:span 8; }
#ml-form .cf7-col-6 { grid-column:span 6; }
#ml-form .cf7-col-4 { grid-column:span 4; }
@media (max-width:768px){
  #ml-form .cf7-col-8, #ml-form .cf7-col-6, #ml-form .cf7-col-4{ grid-column:span 12; }
}

#ml-form .wpcf7-form-control-wrap{ display:block; width:100%; min-width:0; }
#ml-form .cf7-grid > *{ min-width:0; }

#ml-form label{
  display:block !important;
  margin:0 0 8px;
  font-weight:650;
  font-size:13px;
  color:#fff;
}

/* Champs */
#ml-form input:not([type="submit"]),
#ml-form textarea,
#ml-form select{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  height:48px;
  padding:12px 16px !important;

  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.16) !important;

  background:rgba(0,0,0,.18) !important;
  color:#fff !important;
  caret-color:#fff !important;

  font-size:14px !important;
  line-height:1.2 !important;

  outline:none !important;
  transition:.18s ease;
}

#ml-form textarea{
  height:auto;
  min-height:140px;
  padding:14px 16px !important;
  resize:vertical;
}

#ml-form input::placeholder,
#ml-form textarea::placeholder{
  color:rgba(255,255,255,.60) !important;
}

#ml-form input:focus,
#ml-form textarea:focus,
#ml-form select:focus{
  border-color:rgba(229,57,53,.70) !important;
  box-shadow:0 0 0 5px rgba(229,57,53,.20) !important;
  background:rgba(0,0,0,.28) !important;
}

/* Bouton */
#ml-form input[type="submit"]{
  padding:14px 26px !important;
  border-radius:999px !important;
  border:none !important;
  background:#e53935 !important;
  color:#fff !important;
  font-weight:750;
  font-size:15px !important;
  cursor:pointer;
  box-shadow:0 18px 50px rgba(229,57,53,.32);
  transition:.18s ease;
}
#ml-form input[type="submit"]:hover{ background:#cf2e2b !important; transform:translateY(-2px); }
#ml-form .cf7-actions{ text-align:right; margin-top:8px; }

/* RGPD */
#ml-form .cf7-consent{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.90);
  font-size:13px;
}
#ml-form input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  margin-right:10px !important;
  accent-color:#e53935;
}

/* Messages CF7 */
#ml-form .wpcf7-not-valid-tip{
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(229,57,53,.16);
  border:1px solid rgba(229,57,53,.35);
  color:#fff;
  font-size:12px;
  font-weight:650;
}
#ml-form .wpcf7-response-output{
  margin:18px 0 0;
  padding:14px 16px;
  color:rgba(255,255,255,.92) !important;
}
#ml-form .wpcf7-spinner{ margin-left:10px; background-color:rgba(255,255,255,.25); }

.cf7-col-12{
	color: #ffffff;
}

/* FIX ULTIME TEXTE INVISIBLE DANS INPUTS (Chrome/Thèmes) */
#ml-form input:not([type="submit"]),
#ml-form textarea,
#ml-form select{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* IMPORTANT */
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Curseur */
#ml-form input:not([type="submit"]),
#ml-form textarea{
  caret-color: #ffffff !important;
}

/* Placeholder */
#ml-form input::placeholder,
#ml-form textarea::placeholder{
  color: rgba(255,255,255,.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,.65) !important;
  opacity: 1 !important;
}

/* Chrome autofill (quand le navigateur remplit) */
#ml-form input:-webkit-autofill,
#ml-form textarea:-webkit-autofill,
#ml-form select:-webkit-autofill{
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.18) inset !important;
  transition: background-color 9999s ease-out 0s;
}
/* -----------------------------------------------------------
	FIN FORMULAIRE DE CONTACT
----------------------------------------------------------- */

/* Desktop / tablette : 4 en ligne */
.services-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.services-row > *{ min-width: 0; }

/* Mobile : slider + cartes carrées */
@media (max-width: 768px){
  .services-row{
    display: flex;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    padding: 0 16px;              /* aperçu sur les côtés */
    scrollbar-width: none;
  }

  /* Chaque carte = carré */
  .services-row > *{
    flex: 0 0 72vw;               /* largeur de la carte (ajuste 65–80vw) */
    aspect-ratio: 1 / 1;          /* ✅ carré */
    scroll-snap-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 0;
    height: auto !important;
    overflow: hidden;
  }

  /* Icônes */
  .services-row img,
  .services-row svg{
    width: clamp(28px, 8vw, 46px);
    height: auto;
    max-width: 100%;
  }

  /* Texte : max 2 lignes */
  .services-row p{
    margin: 0;
    text-align: center;
    line-height: 1.15;
    font-size: clamp(12px, 3.4vw, 16px);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    hyphens: none;
    word-break: normal;
  }
}

/* Supprime le focus souris */
button:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Supprimer le focus sur le bloc Détails */
.wp-block-details summary:focus,
.wp-block-details summary:active {
  outline: none !important;
  box-shadow: none !important;
}